angular 8: Reactive Form匹配密码

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-match-password',
  templateUrl: './match-password.component.html',
  styleUrls: ['./match-password.component.css']
})
export class MatchPasswordComponent {
  matchForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.matchForm = this.formBuilder.group({
      password: ['', Validators.required],
      confirmPassword: ['', Validators.required]
    }, { validator: this.passwordMatchValidator });
  }

  passwordMatchValidator(formGroup: FormGroup) {
    const password = formGroup.get('password').value;
    const confirmPassword = formGroup.get('confirmPassword').value;

    return password === confirmPassword ? null : { mismatch: true };
  }

  onSubmit() {
    if (this.matchForm.valid) {
      console.log('Form submitted:', this.matchForm.value);
    } else {
      console.log('Form is invalid');
    }
  }
}

<form [formGroup]="matchForm" (ngSubmit)="onSubmit()">
  <div>
    <label for="password">Password:</label>
    <input id="password" type="password" formControlName="password">
    <div *ngIf="matchForm.get('password').invalid && (matchForm.get('password').dirty || matchForm.get('password').touched)">
      <div *ngIf="matchForm.get('password').errors?.required">Password is required.</div>
    </div>
  </div>

  <div>
    <label for="confirmPassword">Confirm Password:</label>
    <input id="confirmPassword" type="password" formControlName="confirmPassword">
    <div *ngIf="matchForm.get('confirmPassword').invalid && (matchForm.get('confirmPassword').dirty || matchForm.get('confirmPassword').touched)">
      <div *ngIf="matchForm.get('confirmPassword').errors?.required">Confirm Password is required.</div>
      <div *ngIf="matchForm.errors?.mismatch">Passwords do not match.</div>
    </div>
  </div>

  <button type="submit" [disabled]="matchForm.invalid">Submit</button>
</form>