在angular 9 reactive表单中未设置动态验证

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

@Component({
  selector: 'app-dynamic-validation',
  templateUrl: './dynamic-validation.component.html',
  styleUrls: ['./dynamic-validation.component.css']
})
export class DynamicValidationComponent {
  dynamicForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.dynamicForm = this.fb.group({
      username: ['', Validators.required],
      password: ['', Validators.required],
      confirmPassword: ['', []]
    });
  }

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

  togglePasswordValidation() {
    const confirmPasswordControl = this.dynamicForm.get('confirmPassword');
    if (this.dynamicForm.get('password').value) {
      confirmPasswordControl.setValidators([Validators.required, this.passwordMatchValidator]);
    } else {
      confirmPasswordControl.clearValidators();
    }
    confirmPasswordControl.updateValueAndValidity();
  }

  passwordMatchValidator(control) {
    const password = this.dynamicForm.get('password').value;
    const confirmPassword = control.value;
    return password === confirmPassword ? null : { mismatch: true };
  }
}

<form [formGroup]="dynamicForm" (ngSubmit)="onSubmit()">
  <input formControlName="username" placeholder="Username">
  <input formControlName="password" type="password" placeholder="Password" (input)="togglePasswordValidation()">
  <input formControlName="confirmPassword" type="password" placeholder="Confirm Password">
  <button type="submit">Submit</button>
</form>