-
Notifications
You must be signed in to change notification settings - Fork 6
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Validation errors do not appear on submit with nested form controls (and ChangeDetection.OnPush) #317
Comments
Hi @david-bulte Thank you for opening an issue and providing a repro. Valdemort shows an error if the field is touched or the surrounding form group directive has been submitted (by default).
<form [formGroup]="form" #formOnPush="ngForm">
<app-nested-onpush [parent]="form" [submitted]="formOnPush.submitted"></app-nested-onpush> This additional input will trigger the change detection of the nested component, and the errors will show. This is not super pretty but should do the job. Let me know if that helps. To sum up, I don't think there is an issue here, as this looks like standard Angular behavior. |
Thanks for your workaround - it helps. I have another idea, at least one that works for us. Our forms are decorated with a special directive "form-helper" (that takes care of all kinds of form-related stuff, e.g. dirty checking etc...). The directive exposes a submitted$ observable. Now for the fix, I have written a directive for each val-errors component, that subscribes to that submitted$ observable. When the form submits, the directive marks the val-errors component as dirty. Not sure whether it's the way to go though, as we only rarely use ChangeDetection.OnPush, so maybe it's a bit overkill? Here's the code from that directive:
You could probably do something similar with a 'form' directive (selector: 'form') that exposes the ngSubmit, and inject that directive in ValidationErrorsComponent. |
When some form controls are on a nested component, validation erros do not always appear on submit.
Check out this stackblitz: https://stackblitz.com/edit/angular-ivy-kprprr
Case 1) No nested component
When clicking submit, error messages appear underneath the controls.
Case 2) With nested component
When clicking submit, error messages do not appear underneath the controls
Case 3) Nested component and explicitedly call form.markAllAsTouched()
When clicking submit, and calling form.markAllAsTouched in the submit method, error messages do appear.
Case 4) Nested component that has ChangeDetection.OnPush
However, even when calling form.markAllAsTouched(), error messages do not appear when clicking submit.
Is this a bug? Or is there a workaround to make this work?
The text was updated successfully, but these errors were encountered: