Angular Reactive Form - Уникальный валидатор поля в режиме редактирования

Question

Я работаю над приложением Angular 8 с Reactive Forms.

У меня есть форма с некоторыми элементами управления, и я использую ее для операций создания и обновления:

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, моя форма вызывает ошибку, что поле идентификатора дублируется.

Answer 1

Я бы просто расширил проверку if в валидаторе, чтобы также проверить, отличается ли this.id (если существует) от / 100 *. Я также изменил 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;
  }
}

STACKBLITZ