Angular 6：自定义验证器未执行

Question

我已经和这个问题斗争了 2 天了。我只是不知道出了什么问题。似乎我的自定义验证器没有执行。

如果您只需按 'Next' 按钮，每个控件都会以红色边框突出显示。如果您填写表格，在电子邮件字段中键入不同的值，然后按 'Next' 表格有效，我没有看到来自自定义电子邮件验证器的任何 console.log。

https://stackblitz.com/edit/angular-nwhgpb

Answer 1

Use type="email" instead of type="text" in your input field unless the formgroup object does not know the field values is valid or not.

检查：https://stackblitz.com/edit/angular-eol5eq?file=src/app/app.component.html

Answer 2

(IF you want to excute passwordValidator you need to add '()' to your Validator Function example password1: new FormControl("",[Validators.required,this.passwordValidator()]), Even though it will throw error because FormGroup you used inside will not have a reference to the formData password1 and password2)

如果你想比较两个输入字段，你需要在 formGroup 中使用 formGroup，因为如果你不使用 formGroup，formGroup 将不会像这样保存对象。

value: Object
email1: "data"
email2: ""
__proto__: Object

https://angular.io/guide/form-validation#custom-validators 使用此 Ref 实现比较密码和电子邮件

/** A hero's name can't match the given regular expression */
export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    const forbidden = nameRe.test(control.value);
    return forbidden ? {'forbiddenName': {value: control.value}} : null;
  };

Angular 6：自定义验证器未执行

Angular 6: Custom validators not executing

angular-validation

angular

angular-forms