Angular: Disabling child control updating the parent form Pristine status-CodePudding

I have an angular form like this

this.form = this._fb.group({
     details: this._fb.group({
         originId: [null, Validators.required],
         
         ... some more child controls
     }),
     ... some more child controls      
});

On ngOnInit() when certain conditions fulfil I am marking the form dirty and touched, like this

this.form.markAsDirty();
this.form.markAsTouched();

After this I get this.form.isPristine as false which is right, which is what I wanted.

Then later I make control originId disable like this to disable originId

this.form.get('details').get('originId').disable();

But the problem is, as soon as I disable the originId it updates the pristine status of the parent form to true, so this this.form.isPristine becomes true which I do not want.

I am not getting why does setting the child control updates the parent form pristine status.

Can anybody point out what is going wrong here?

CodePudding user response：

The AbstractControl.disable method propagates the disable flag to all direct ancestors as its default behavior which in your case results in your entire form being marked as disabled.

see: https://angular.io/api/forms/AbstractControl#disable

To fix this, include the onlySelf: boolean property in the disable options object.

this.form.get('details').get('originId').disable({onlySelf: true});