CODEWITHSUNDEEP
angularangular-reactive-forms
Leon Csergity
Leon Csergity

Reputation: 311

Angular - Parent form not updating, when invalid form is bound to the child form controller which is also an angular component

I have a use case where the form object is created in a service, now when the page is showed in a dialog the form is read from the service in the ngOnInit and is bound to a local variable which is used in the template. The form is later on used to read the data.

The problem is as follows, when the form is valid and the user navigates to the next page and return to this page everything works fine, BUT when the form is invalid and the user leaves then returns the parent form does not update correctly.

The child component has the correct validity, but the parent form stays invalid. I noticed that between these 2 use cases the difference is the error object in the forms.

I tried to update the validity by calling updateValueAndValidity on the parent form. But it did not work.

The only thing that worked is calling setValidators([]) on the child form control without any validators. It did not have validators to begin with.

Here is a stackblitz example of the problem.

https://stackblitz.com/edit/angular-8-app-example-ent7s2?embed=1&file=src/app/parent-form-component/parent-form.component.ts&view=preview

Upvotes: 4

Views: 4367

Answers (1)

Matheus Cassol
Matheus Cassol

Reputation: 51

I believe I fixed it. The issue was that every time that the ngOnInit was called the original form (in the app-component) was losing the reference of the child FormGroup due to the "new FormGroup()" statement inside the child-component. To avoid that issue you should try not to reassign the FormGroups inside the form.

Upvotes: 2

Related Questions