Angular：禁用子控件更新父窗体 Pristine 状态

Question

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?

Answer 1

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});