Angular 15: How to Properly Handle Form Submission with Multiple Nested FormGroups and Dynamic scenarios Messages?
I'm refactoring my project and After trying multiple solutions online, I still can't figure this out. I'm currently working on an Angular 15 application where I have a reactive form consisting of multiple nested `FormGroup` instances. The form has several fields, and I need to ensure proper handling of form submission, especially for custom validation messages that depend on the state of nested controls. For example, I have a structure like this: ```typescript this.myForm = this.fb.group({ userDetails: this.fb.group({ name: ['', Validators.required], email: ['', [Validators.required, Validators.email]], }), address: this.fb.group({ street: ['', Validators.required], city: ['', Validators.required], }) }); ``` When the form is submitted, I want to display specific behavior messages that indicate which nested control has failed validation. However, I'm struggling to properly trigger the behavior messages. I've tried accessing the controls directly, but the messages aren't updating as expected. Here’s what I have in my submit function: ```typescript onSubmit() { if (this.myForm.invalid) { this.myForm.markAllAsTouched(); return; } // Handle successful submission } ``` Despite marking all controls as touched, the behavior messages don't appear as expected. I also need to ensure that the messages are dynamic based on the validation state. I implemented a method to get behavior messages: ```typescript getErrorMessage(control: AbstractControl): string { if (control.hasError('required')) { return 'This field is required.'; } if (control.hasError('email')) { return 'Not a valid email.'; } return ''; } ``` However, when I call this function from the template, it's not working correctly for the nested form controls. My template looks like this: ```html <form [formGroup]='myForm' (ngSubmit)='onSubmit()'> <div formGroupName='userDetails'> <input formControlName='name' /> <div *ngIf='myForm.get("userDetails.name").touched'> {{ getErrorMessage(myForm.get("userDetails.name")) }} </div> <input formControlName='email' /> <div *ngIf='myForm.get("userDetails.email").touched'> {{ getErrorMessage(myForm.get("userDetails.email")) }} </div> </div> <div formGroupName='address'> <input formControlName='street' /> <div *ngIf='myForm.get("address.street").touched'> {{ getErrorMessage(myForm.get("address.street")) }} </div> <input formControlName='city' /> <div *ngIf='myForm.get("address.city").touched'> {{ getErrorMessage(myForm.get("address.city")) }} </div> </div> <button type='submit'>Submit</button> </form> ``` Despite the logic looking correct, the behavior messages do not show up upon validation failure. I've checked that my validators are correctly applied, yet the UI does not respond as expected. Any insights on how to properly display dynamic behavior messages for nested form controls in Angular 15 would be greatly appreciated! My development environment is macOS. Is there a better approach? Has anyone else encountered this? My development environment is Windows 10. The stack includes Typescript and several other technologies. Is there a simpler solution I'm overlooking?