Calling disable() on FormArray child resets dirty state

Question

In Angular I have a form like the following

  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",
        }),
      ]),
    });

When I call form.get('items').markAsDirty() the dirty property of the FormArray is true, as expected.

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

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

When I call disable() or enable() on one of the children of the FormArray after that, the dirty property of the FormArray is false. I didn't expect that

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

Does anyone know why that is? Or is this a bug in Angular?

See also Stackblitz: https://stackblitz.com/edit/angular-ivy-koyisp?file=src%2Fapp%2Fapp.component.ts

(<FormArray>this.form.get('items')).at(0).get('value').disable({onlySelf: true}); this should do the job for you — Kamran Khatti
Here we need to disable only specific field rather than the whole form and for that we used {onlySelf: true} I am moving this to as an answer you can accept that answer. — Kamran Khatti

Kamran Khatti Kamran Khatti · Accepted Answer · 2020-08-04T10:06:21

You need to disable FormArray's particular field by passing {onlySelf: true} in .disable() see the below example.

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

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

Calling disable() on FormArray child resets dirty state

1 Answers