角度反应形式 - 编辑模式下的唯一字段验证器

Question

我正在开发一个带有响应式表单的 Angular 8 应用程序。

我有一个带有一些控件的表单，我将其用于创建和更新操作：

this.form = new FormGroup({
id: new FormControl({value: this.editMode ? this.id : '', disabled: false}, [
Validators.required,
this._uniqueIdValidator.bind(this)
]),
label: new FormControl(this.editMode ? this.label : '', [
Validators.required
])
});

id控件有一个自定义验证程序来检查其唯一性：

private _uniqueIdValidator(control: FormControl) {
if (this.collection.findIndex(item=> item.id === control.value) > -1) {
return {duplicate: true};
} else {
return null;
}
}

现在，添加新项目时一切正常。 但是，当我在编辑模式下打开表单时，它会引发duplicate错误，并且我无法使用与以前相同的值保存项目。

我在验证器中添加了以下代码：

if (this.id !== '' && this.id === control.value) {
// value is identical, so the form is valid
return null;
}

但我很好奇是否有另一种方法可以实现它。

谢谢！

---

例： 假设我的数据收集是：

[
{id: 'id1', label: 'Foo'},
{id: 'id2', label: 'Bar'},
{id: 'id3', label: 'Another'}
]

我想用id3编辑项目的标签，我的表单会引发一个错误，即 id 字段重复。

Answer 1

我只是扩展验证器中的 if 检查以检查this.id(如果存在(是否与/相同control.value.我还在这里将findIndex更改为find：

private _uniqueIdValidator(control: FormControl) {
if (control.value !== this.id && this.collection.find(item => item.id === control.value)) {
return { duplicate: true };
} else {
return null;
}
}

斯塔克闪电战