Angular 角度6反应形式，同步交叉场验证

@angular/forms:6.1.7

我正在尝试创建一个自定义验证器，用于检查2formControl的不一致性

按照以下步骤操作时，我在将值输入到两个表单之一时出错：

Uncaught Error: Expected validator to return Promise or Observable.
    at toObservable (forms.js:596)
    at Array.map (<anonymous>)
    at FormControl.asyncValidator (forms.js:584)
    at FormControl.push../node_modules/@angular/forms/fesm5/forms.js.AbstractControl._runAsyncValidator (forms.js:2454)
    at FormControl.push../node_modules/@angular/forms/fesm5/forms.js.AbstractControl.updateValueAndValidity (forms.js:2427)
    at FormControl.push../node_modules/@angular/forms/fesm5/forms.js.FormControl.setValue (forms.js:2764)
    at updateControl (forms.js:1699)
    at DefaultValueAccessor.onChange (forms.js:1684)
    at DefaultValueAccessor.push../node_modules/@angular/forms/fesm5/forms.js.DefaultValueAccessor._handleInput (forms.js:741)
    at Object.eval [as handleEvent] (ChangePasswordComponent.html:13)

实施：

import { FormGroup, ValidationErrors, ValidatorFn } from '@angular/forms';

export const passwordMatchValidator: ValidatorFn = (control: FormGroup): ValidationErrors | null => {
  const password = control.get('password');
  const confirmPassword = control.get('confirmPassword');

  if (!password || !confirmPassword) {
    return null;
  }

  return password === confirmPassword ? null : { passwordMismatch: true };
};

  this.formGroup = this.formBuilder.group(
      {
        password: ['', Validators.required, Validators.minLength(6)],
        confirmPassword: ['', Validators.required, Validators.minLength(6)]
      },
      {
        validators: passwordMatchValidator
      }

问题: 如何创建自定义同步跨域验证器

旁白 是否可以将formControl名称传递给函数而不是硬编码

更新：最终解决方案 实施：

this.formGroup = this.formBuilder.group(
      {
        password: ['', [Validators.required, Validators.minLength(6)]],
        confirmPassword: ['', [Validators.required, Validators.minLength(6)]],
        currentPassword: ['', Validators.required]
      },
      {
        validator: matchValidator('password', 'confirmPassword')
      }

---

根据文档，您应该将

验证程序

属性传递到

FormBuilder

中的

组

函数的

额外

参数中。看见第二个问题是，在创建表单控件时，应将数组作为第二个参数传递，并直接使用

formBuilder

设置验证器：

密码：[''[Validators.required，Validators.minLength（6）]

因为当前，

minLength

验证器作为第三个参数被视为

asyncValidator

附带问题

您可以创建一个验证器工厂函数，该函数为您创建验证器并接受2个控件：

export const passwordMatchValidator=（passwordControl:AbstractControl，confirmPasswordControl:AbstractControl）：ValidatorFn=>{
返回（控件：FormGroup）：ValidationErrors | null=>{
const password=passwordControl.value；
const confirmPassword=confirmPasswordControl.value；
如果（！password | |！confirmPassword）{
返回null；
}
返回密码===confirmPassword？null:{passwordMismatch:true}；
}
};

使用方法：

passwordMatchValidator（this.formGroup.get（'password'）、this.formGroup.get（'confirmPassword'））

---

或者，工厂函数可以只获取字符串参数而不是控件，并提取表单控件本身。

非常感谢！

this.formGroup = this.formBuilder.group(
      {
        password: ['', [Validators.required, Validators.minLength(6)]],
        confirmPassword: ['', [Validators.required, Validators.minLength(6)]],
        currentPassword: ['', Validators.required]
      },
      {
        validator: matchValidator('password', 'confirmPassword')
      }