Summary: When a FormGroup contains a nested FormControl that changes from disabled to enabled or vice versa, the FormGroup is not marked as dirty.
Details: How can you identify all form controls within a FormGroup that have switched between being enabled and disabled?
The example on this Stackblitz shows that properties like pristine, dirty, touched, and untouched remain unchanged when a control transitions from enabled to disabled or vice versa.
export class AppComponent implements OnInit {
person: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.person = this.fb.group({
name: this.fb.control(''),
age: this.fb.control(100),
});
}
}
In the TypeScript snippet above, a single FormGroup called 'person' with two FormControls (name and age) is defined.
The HTML code below allows toggling the 'name' control between enabled and disabled states by clicking buttons. The output includes various properties.
<form [formGroup]="person">
<input type="text" placeholder="Name" formControlName="name">
<button (click)="person.controls['name'].disable()">Disable</button>
<button (click)="person.controls['name'].enable()">Enable</button>
<br />
<br />
<input type="text" placeholder="Age" formControlName="age">
</form>
<pre>{{person.value | json}}</pre>
disabled: {{ person.disabled }}<br />
pristine: {{ person.pristine }}<br />
dirty: {{ person.dirty }}<br />
touched: {{ person.touched }}<br />
untouched: {{ person.untouched }}<br />
https://i.sstatic.net/YtlL0.png
I expected it to be straightforward to detect when a control becomes:
- enabled after being disabled
- disabled after being enabled
Unlike other properties like pristine, dirty, touched, and untouched, the enabled/disabled state of a control seems temporary.
It appears there is no specific property in a FormGroup indicating whether child controls have changed from their original enabled/disabled state. The FormGroup remains pristine and untouched.
Suggestions to use statusChanges only provide four validation status values (VALID, INVALID, PENDING, DISABLED), making it challenging to map these statuses to specific controls and determine if they have transitioned between enabled and disabled. Another Stackblitz demonstrates this issue.
EDIT:
I have raised a bug report for the observed behavior: FormGroup not marked as dirty when nested FormControl switches between disabled and enabled states.