Angular 2 Model-Driven Form: Adding/Removing items to FormArray doesn't make form dirty

Question

I have an angular 2 model-driven form that has a property of type "FormArray". When I add or remove items to this form array the form itself does not seem to register any changes and the form is not made "dirty".

Here is a plunker showing the problem: https://plnkr.co/edit/j1S80CmPBF1iHI5ViEia?p=preview

Here is the method that removes an element from the FormArray:

removeAddress(i: number) {
    const control = <FormArray>this.myForm.controls['addresses'];
    control.removeAt(i);
}

Is there a way other than manually setting this.myForm.dirty = true for the form to detect that changes have been made to this <FormArray> property?

Milad Milad · Accepted Answer · 2016-12-02T13:11:35

Normally , dirty means there has been some value update in any of the fields .

An input is dirty , only if user has started typing ( has made it dirty) .

But if you want to hack this altogether and make it dirty yourself after you add or remove any element :

If you want to make the form dirty :

       this.myForm.valueChanges.subscribe(()=>{

                this.myForm.markAsDirty();
       });

Angular 2 Model-Driven Form: Adding/Removing items to FormArray doesn't make form dirty

2 Answers