我正在使用带反应形式的Angular 6 . 其中一个表单字段是FormArray,它在用户单击“添加”按钮时添加控件 .
在FormArray中,我想检查FormArray中是否已存在FormControl值 .
这可以正常工作,直到用户单击“添加”按钮重置上一个控件错误并将控件标记为有效,尽管它仍然具有重复值 .
这是在窗体数组中添加控件的函数:
onAddIPAddress() {
if (( < FormArray > this.tcpudpAppFormGroup.get('ipaddressArray')).length < 8) {
const control = new FormControl(null, Validators.compose([
Validators.required,
Validators.pattern(this.ipaddressPattern),
this.forbiddenIPs.bind(this),
this.onDuplicateIPFormArray.bind(this)
]));
( < FormArray > this.tcpudpAppFormGroup.get('ipaddressArray')).push(control);
} else {
return;
}
}
然后,这是自定义验证器代码:
onDuplicateIPFormArray(control: FormControl): {
[s: string]: boolean
} {
if (
( < FormArray > this.tcpudpAppFormGroup.get('ipaddressArray')).length > 1 &&
!( < FormArray > this.tcpudpAppFormGroup.get('ipaddressArray')).value.includes(null) &&
( < FormArray > this.tcpudpAppFormGroup.get('ipaddressArray')).value.indexOf(control.value) !== -1)
{
console.log(( < FormArray > this.tcpudpAppFormGroup.get('ipaddressArray')).value.indexOf(control.value));
return {
duplicateIP: true
};
}
return null;
}
从控制台,我可以看到IndexOf值不正确但无法理解原因 .
我有什么想法可以解决这个问题?
谢谢
1 回答
好的,所以我已经改变了应该如何进行验证,看起来好多了:
从各个FormArray控件中删除自定义Validator .
将重复项自定义验证器放在FormArray本身上 .
然后创建FormArray验证器作为标准函数来检测数组中的重复项: