Angular 中自定义验证器的问题

Question

我知道这个问题已经在许多其他帖子中提出过，但在所有提出的解决方案中，我找不到一个可以为我解决问题的解决方案。

我正在尝试创建一个验证器来检查输入的确认密码是否与密码相同。

这是我的构建表单代码：

    this.form = new FormGroup({
      name: new FormControl('', [Validators.required]),
      surname : new FormControl('', [Validators.required]),
      username: new FormControl('', [Validators.required, Validators.email]),
      tempUsername: new FormControl('', [Validators.required, Validators.email]),
      password: new FormControl('', [Validators.required, Validators.minLength(8), Validators.maxLength(16)]),
      passwordTemp: new FormControl('', [Validators.required]),
    }, { validator: this.matchingPasswords }
    );
  }

这是我的验证器方法：

  public matchingPasswords(c: AbstractControl): ValidationErrors | null {
    const password = c.get(['passwords']);
    const confirmPassword = c.get(['passwordTemp']);

    if (password.value !== confirmPassword.value) {
      return { mismatchedPasswords: true };
    }
    return null;
  }

在构建表单的第 8 行中，我收到以下错误：

TS2345：类型参数 '{ validator: (c: AbstractControl) =>验证错误； }' 不可分配给类型为 'ValidatorFn | 的参数验证器Fn[] |抽象控制选项'。   对象文字只能指定已知属性，并且类型“ValidatorFn |”中不存在“validator”验证器Fn[] |抽象控制选项'。

有什么想法吗？

Answer 1

您应该使用 validators 而不是 validator：

this.form = new FormGroup({
 // fields
}, { validators: this.matchingPasswords });

也许将 matchingPasswords 移至导出的实用程序函数也更好，但这只是个人代码偏好。

其他工作符号有：

this.form = new FormGroup({
 // fields
}, this.matchingPasswords);

this.form = new FormGroup({
 // fields
}, [this.matchingPasswords]);

Answer 2

使用验证器而不是验证器

{ validators: this.matchingPasswords }

，这

public matchingPasswords: ValidatorFn = (c: AbstractControl): ValidationErrors | null => {
        const password = c.get('passwords');
        const confirmPassword = c.get('passwordTemp');

        if (password && confirmPassword && password.value !== confirmPassword.value) {
            return { mismatchedPasswords: true };
        }

        return null;
    };