Вызов disable () для дочернего элемента FormArray сбрасывает грязное состояние

Question

В Angular у меня есть форма, подобная следующей:

  const form = this.fb.group({
      id: 1,
      unique_identifier: "a-b-c-d-e",
      name: "foo",
      last_update: "2020-07-31 12:22:22",
      items: this.fb.array([
        this.fb.group({
          name: "Item 1",
          value: "1",
        }),
      ]),
    });

Когда я вызываю form.get('items').markAsDirty(), грязное свойство FormArray, как и ожидалось, истинно.

form.get('items').markAsDirty();

console.log(form.get('items').dirty) // = true

Когда я вызываю disable() или enable() для одного из потомков FormArray после этого, грязное свойство FormArray становится ложным. Я не ожидал, что

form.get('items').markAsDirty();

console.log(form.get('items').dirty) // = true

form.get('items').at(0).get('value').disable();

console.log(form.get('items').dirty) // = false

Кто-нибудь знает, почему? Или это ошибка в Angular?

См. Также Stackblitz: https://stackblitz.com/edit/angular-ivy-koyisp?file=src%2Fapp%2Fapp.component.ts

Answer 1

Вам необходимо отключить конкретное поле FormArray, передав {onlySelf: true} в .disable(), см. Пример ниже.

(<FormArray>this.form.get('items')).at(0).get('value').disable({onlySelf: true});

console.log(form.get('items').dirty) // = true (should be true now)