Question

我正在尝试创建一个自定义验证器，该验证器将比较两个应该匹配的密码，如果它们不匹配，则应禁用一个按钮，如果这样做，则用户可以完成注册。

搜索堆栈溢出并浏览其他站点后，我重写了定制验证器以匹配先前提供的答案；但是，它们似乎都没有对我遇到的错误产生任何影响。

进口

import { FormControl, Validators, FormGroup, ValidatorFn, AbstractControl } from "@angular/forms";
import { Component } from "@angular/core";
import { MatButton } from "@angular/material";

FormGroup

registerForm = new FormGroup({
    first: new FormControl(null, [
      Validators.required,
    ]),
    last: new FormControl(null, [
      Validators.required,
    ]),
    id: new FormControl(null, [
      Validators.required,
    ]),
    email: new FormControl(null, [
      Validators.required,
      Validators.email
    ]),
    newpass: new FormControl(null, [
      Validators.required,
      this.ageRangeValidator
    ]),
    confirmpass: new FormControl(null, [
      Validators.required,
      this.ageRangeValidator
    ]),
  }, {this.matchingPasswords} );

CustomValidator

matchingPasswords(c: AbstractControl): {[key: string]: any} {
    let password = c.get(['passwords']);
    let confirmPassword = c.get(['confirmpwd']);

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

当我尝试运行此代码时，遇到以下错误。

类型'{的参数：this：any; }'不能分配给'ValidatorFn |类型的参数。 ValidatorFn [] | AbstractControlOptions”。对象文字只能指定已知的属性，类型'ValidatorFn |中不存在'this'。 ValidatorFn [] | AbstractControlOptions'.ts（2345）

这是针对学校高级项目的。

Answer 1

问题似乎出在

this.matchingPasswords

验证器必须是静态函数。因此，请勿使用此关键字。您可以将matchingPasswords定义为纯JavaScript函数，也可以在打字稿类中将其定义为静态函数（推荐方法）。然后在您的模块中包含该类，并将函数作为ClassName.matchingPasswords;

Answer 2

您将返回null或ValidatorError不仅是一个具有any属性的对象。更改您的matchingPasswords方法的属性类型返回：

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

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

对于html参考，我将检查控件是否有任何错误，并验证是否由于密码不匹配而导致错误：

<div *ngIf="registerForm.get('confirmpwd').errors && registerForm.get('confirmpwd').errors['mismatchedPasswords']">
   Passwords do not match
</div>

如何使用自定义验证程序语法解决遇到的错误？

2 个答案: