Angular 自定义验证控件无法获取表单值

Question

我的 form-validators.ts 中的代码：

console.log('password:', password?.value);
console.log('confirmPwd:', confirmPwd?.value);

...总是获取我未定义，导致自定义验证（matchPwdValidator（））不断返回false。如果我在交换机中获取confirmPwd，它将打印出正确的详细信息。以下是我的代码的摘要版本。

表单验证器.ts

import { AbstractControl, ValidatorFn, Validators } from "@angular/forms";

export class FormValidators {
  ...

  static matchPwdValidator(): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } | null => {
      const password = control.get("password");
      const confirmPwd = control.get("confirmPwd");
  
      console.log('password:', password?.value);
      console.log('confirmPwd:', confirmPwd?.value);
  
      if (!password || !confirmPwd || password.value !== confirmPwd.value) {
        return { PwdNotMatched: true };
      }
  
      return null;
    };
  }
}

form.组件.ts

import { Component } from "@angular/core";
import { FormBuilder, FormGroup } from "@angular/forms";
import { FormValidators } from "../utilities/form-validators";

@Component({
  selector: "app-form",
  templateUrl: "./form.component.html",
  styleUrls: ["./form.component.scss"],
})
export class FormComponent {
  
  cpwdError: boolean = false;

  sampleForm: FormGroup;

  constructor(
    private formBuilder: FormBuilder,
  ) {
    
    this.sampleForm= this.formBuilder.group(
      {
        ...
        password: ["", FormValidators.passwordValidator()],
        confirmPwd: ["", FormValidators.matchPwdValidator()],
      },
    );
    
    ...
    this.sampleForm.get('confirmPwd')?.statusChanges .subscribe(() => {
      this.updateErrorFlags('confirmPwd');
    });
  }


  private updateErrorFlags(controlName: string): void {
    const control = this.sampleForm.get(controlName);
    if (control) {
      switch (controlName) {
        ...
        case 'confirmPwd':
          this.cpwdError = control.hasError('PwdNotMatched') && control.dirty;
          break;
      }
    }
  }
}

Answer 1

您将

matchPwdValidator

验证设置为“confirmPwd”FormControl。它找不到任何名称为“password”和“confirmPwd”的控件。您应该从当前表单控件的根表单组中获取这两个控件。

const password = control.parent?.get('password');
const confirmPwd = control.parent?.get('confirmPwd');

演示@StackBlitz