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

我有两个表单字段，其中如果填写第一个字段，第二个字段是必填字段。如果我尝试在Angular2中使用自定义验证器来执行此操作，验证器仅在初始化时以及特定字段发生更改时触发。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观察到，当改变了场2手动进行检查，如：

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

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

来源

2016-06-14 Arne

参见http://stackoverflow.com/questions/31788681/angular2-validator-which-relies-on-multiple-form-fields/34582914#34582914 –

你可以使用一个全球性的验证了这样的组：

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 
    }; 
}

来源

2016-06-14 14:52:35

如果你只是想知道阉伟大的工程该表格是有效的。然而，我想向错误的字段显示错误消息，这对组验证器不会发生。 – Arne

我想，以解决阿恩的评论对亨利的回答扩大一点。为了处理formgroup级别验证器中多个字段和可能的多个验证的验证，解决方案是从验证器返回一个函数，然后返回一个指示错误类型的对象。下面是一个匹配验证器的例子，我添加了一些额外的错误来说明这一点。请注意，它返回一个可能具有多个属性的对象，其中每个对象属性都是任何字符串，并且该值是一个布尔值。

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>

来源

2016-10-05 19:26:15 HisDivineShadow

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

回答

相关问题