Angular2相互依赖的表单字段验证

Question

我有两个表单字段，如果填写第一个字段，则第二个字段是必填的。如果我尝试在 Angular2 中使用自定义验证器执行此操作，则验证器仅在初始化时和特定字段更改时触发。

案例： - 用户填写字段 1 - 字段 2 应该成为必需，但直到用户实际更改字段 2（触发自定义验证）。

private createForm():void {
 this.testForm = this._formBuilder.group({
  'field1': [],
  'field2': ['', this.validateRequired()]
 });
}

private validateRequired(){
 console.log("something", this);
 let component = this;

 return (control: Control): { [s: string]: boolean } => {
   return component.testModel.field1 && !control.value {"required":true} : null;
 }
}

看到这个 plunkr：http://plnkr.co/edit/PEY2QIegkqo8BW1UkQS5?p=preview

编辑：

现在我订阅了 field1 的 valueChange observable，当更改时对 field2 执行手动检查，例如：

this.testForm.controls['field1'].valueChanges.subscribe(
  value => {
   component.testForm.controls['field2].updateValueAndValidity();        
  }
)

但我觉得必须有更好的方法来做到这一点。

Answer 1

您可以像这样对组使用全局验证器：

private createForm():void {
 this.testForm = this._formBuilder.group({
  'field1': [],
  'field2': ['', this.validateRequired()]
 }, {
  validator: this.someGlobalValidator // <-----
 });
}

someGlobalValidator(group: ControlGroup) { // <-----
  var valid = false;

  for (name in group.controls) {
    var val = group.controls[name].value

    (...)
  }

  if (valid) {
    return null;
  }

  return {
    someValidationError: true
  };
}

Answer 2

我想稍微扩展一下蒂埃里的回答，以解决阿恩的评论。为了在您的表单组级别验证器中处理多个字段的验证以及可能的多个验证，解决方案是从您的验证器返回一个函数，然后返回一个指示错误类型的对象。这是一个字段匹配验证器的示例，为了说明这一点，我添加了一些额外的错误。请注意，它返回一个可能具有多个属性的对象，其中每个对象属性是任意字符串，值是布尔值。

export function FieldMatchingValidator(field1: string, field2 :string) {

    return (cg: FormGroup): { [s: string]: boolean } => {
        let retVal = null;
        let f1 = cg.controls[field1];
        let f2 = cg.controls[field2];
        retVal = f1.value === f2.value ? null : { fieldMismatch: true };
        if(somecondition){
            retVal['someerror'] = true;
        }
        if(someothercondition){
            retVal['someothererror'] = true;
        }
        return retVal;
    }
}

当此验证器运行时，如果遇到错误条件，则表单的错误属性将被返回的对象填充，该对象具有一个或多个指示不同错误的属性。然后，您所要做的就是将适当的角度属性设置放在有验证错误的控件上。

<div *ngIf="myForm.hasError('fieldMismatch')">
Field Mismatch
</div>

<div *ngIf="myForm.hasError('someerror')">
Some Error
</div>

<div [class.Errors]="myForm.hasError('someothererror')">
Some Other Error
</div>