The disabled attribute does not work on a top level form which is an array

[maxime1992]

Trying to get the top level form disabled in the following case (where currentStateRotors is an array):

<app-rotors-form
  *ngIf="(currentStateRotors$ | async) as currentStateRotors"
  [rotors]="currentStateRotors"
  [disabled]="true"
></app-rotors-form>

The disabled property is not taken into account.

It should loop over the array and disable all the controls from the array.

[maxime1992]

☝️ Wrote a test for that and couldn't repro 🤔

[maxime1992]

I was able to repro and understand what's happening.

I've tried to write a fix to see if it would be that and it worked. PR on the way but missing tests for now.

EDIT: about the "workaround: obvious" --> instead of passing [disabled]="true" we can wait a tick before setting it to true...

[areijngoudt]

We've noticed the same behaviour when FormArray's are in SubForms. When initially [disable]="true", normal FormControls get disabled but FormControls that are part of FormArrays don't get disabled.

[maxime1992]

After a few hours of investigation and banging my head on a wall, I found out really really weird issues with Angular and disabled forms:

angular/angular#31506
angular/angular#22556

To explain a bit the weird behavior I did encounter here:

• ngx-sub-form creates an internal FormGroup for every sub component (or control value accessor under the hood)
• whenever the writeValue hook is called by angular, we set the value of the form to the new one:

ngx-sub-form/projects/ngx-sub-form/src/lib/ngx-sub-form.component.ts

Lines 238 to 240 in e01e19a

	this.formGroup.setValue(transformedValue, {
	emitEvent: false,
	});

• In some cases when the form is disabled and its value changes (not always...) the form is being set to enabled
• console logging this.formGroup.disabled just before and right after the setValue above always show the same value (which is what we'd expect) aven though it's apparently not true 🤷‍♂️
• saving if the form is disabled or not before the setValue and disable it after if it was already disabled... fixes it 😱 ...

const fgDisabled: boolean = this.formGroup.disabled;

this.formGroup.setValue(transformedValue, {
  emitEvent: false,
});

if (fgDisabled) {
  this.formGroup.disable();
}

✔️

I do not understand, I'm not sure how to repro and therefore can't write a test but I've made a comment explaining that in the code so it doesn't go away 👍

Fix coming soon

[maxime1992]

🎉 This issue has been resolved in version 3.0.5 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[maxime1992]

@areijngoudt you can upgrade to the new version 👆

Let us know how it goes and if it fixes the issue on your side too 😸

[maxime1992]

🎉 This issue has been resolved in version 3.0.6 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[maxime1992]

actually I dealt with 2 errors at the same time and the first one might not be the one you needed.

You should rather grab latest (3.0.6) instead of 3.0.5 👍

[areijngoudt]

@maxime1992 works like a charm, thanks!

I still have one question: when the form is set to disabled (using the [disabled] input property), the formGroup becomes dirty (while the form values have not changed). Is there a way to prevent this?

[maxime1992]

works like a charm

Glad to hear that 👍 !

when the form is set to disabled (using the [disabled] input property), the formGroup becomes dirty

Sounds like a bug @areijngoudt can you create a new issue please?