我正在为表单中的两个字段实现交叉字段验证(基于响应/模型的方法),并且不知道如何将错误添加到formcontrol的现有错误列表
表格:
this.myForm = new FormGroup({
name: new FormControl('', Validators.minLength(3));
city: new FormGroup({
cityOne: new FormControl('', Validators.minLength(3)),
cityTwo: new FormControl('', Validators.minLength(3))
}, this.validateEqualCities)
});
验证者:
validateEqualCities(formGroup: FormGroup) {
return (control: AbstractControl): { [key: string]: any } => {
if (formGroup.controls['cityOne'].value && formGroup.controls['cityTwo'].value && formGroup.controls['cityOne'].value !== formGroup.controls['cityTwo'].value) {
formGroup.controls['cityOne'].setErrors({ 'equalCities': true }, { emitEvent: true });
formGroup.controls['cityTwo'].setErrors({ 'equalCities': true }, { emitEvent: true });
return { 'equalCities': false };
} else {
formGroup.controls['cityOne'].updateValueAndValidity({ onlySelf: true, emitEvent: false });
formGroup.controls['cityTwo'].updateValueAndValidity({ onlySelf: true, emitEvent: false });
}
return null;
};
}
我的问题: 如果验证失败,“setErrors(..)”将覆盖已存在的所有错误(formControls的Validators),因此没有正确的状态,因为实际上应该有2个错误。
如果我没有直接将错误设置为表单控件并且只向表单返回错误,则只有表单无效并且会收到错误,而不是其控件。
如何实现表单和控件都具有真实的验证状态?
非常感谢!
答案 0 :(得分:2)
您可以在分配错误,修改错误并将整个对象写回之前捕获错误对象。
validateEqualCities(formGroup: FormGroup) {
return (control: AbstractControl): { [key: string]: any } => {
if (formGroup.controls['cityOne'].value && formGroup.controls['cityTwo'].value && formGroup.controls['cityOne'].value !== formGroup.controls['cityTwo'].value) {
let errors = formGroup.controls['cityOne'].errors ? formGroup.controls['cityOne'].errors : {};
errors['equalCities'] = false;
formGroup.controls['cityOne'].setErrors(errors, { emitEvent: true });
errors = formGroup.controls['cityTwo'].errors ? formGroup.controls['cityTwo'].errors : {};
errors['equalCities'] = false;
formGroup.controls['cityTwo'].setErrors(errors, { emitEvent: true });
return { 'equalCities': false };
<...>
这是一个带有工作演示的Plunker:http://plnkr.co/edit/XTeH1ifQTJSoMvBEvE0d?p=preview