Angular 4 Template Driven nested form validation?

Question

I have 2 components, a parent component and a child component. The parent component contains the following:

   <form (ngSubmit)="saveWebsite();" #adminForm="ngForm">

         <input type="text" name="WebName" [(ngModel)]="milestone.WebName" class="form-control" required/>

          <app-documents [documents]="caseData.CaseWebsiteDocuments" [caseId]="caseId" (fileEvent)="showToast($event)"
          (documentsEvent)="documentsEvent($event)"></app-documents>

      <button type="submit" class="btn btn-success pull-right" *ngIf="caseId">Save</button>
    </form>

The child component contains the following:

<input  type="text" [(ngModel)]="doc.FriendlyName" name="friendlyName" class="form-control" required/>

If I put all inputs in the parent component, the validation works for everything. I am trying to check the dirty status. Right now, if I make changes on the Parent, the dirty status is set to true, but if I make a change on the child, the dirty status does not change. How can I get validation to work in template driven nested controls?

score 14 · Accepted Answer · answered Oct 27 '17 at 15:10

14

You can provide ControlContainer on your child component like

import { ControlContainer, NgForm } from '@angular/forms';

@Component({
  selector: 'app-documents'
  ...,
  viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]
})
export class AppDocumentsComponent {}

See also

Angular2 nested template driven form

answered Oct 27 '17 at 15:10

yurzui

205,937
32
433
399

Wow, nice. I did the following and just added ngModelGroup="documents" to a container div in my child component and it works. Thanks a bunch!!! – xaisoft Oct 27 '17 at 15:30
How can I implement it in that case if I have more nested parts (forms) below the main form? – L. Kvri Jan 30 '19 at 15:36
@Laszlo Can you provide an example on stackblitz? – yurzui Jan 30 '19 at 15:38
I cannot provide an example, just think about it, you have the main form and it contains more Tab sheets, each tab sheet contains an individual component which has a lot of data entry fields. The submit button on the main form depends on all mandatory fields on various tab sheets. – L. Kvri Jan 30 '19 at 15:46
1

@Laszlo If you have more nested forms then you probably want to use ngModelGroup. It also will work like in my solution but with only one difference: you need to use common version from the link in the question. Here's an example https://ng-run.com/edit/YLSx6OJVKYUbXQTsWOx2 – yurzui Jan 30 '19 at 16:01
Alexey, This is a good solution thank you! Where can I learn in similar deep in Angular? Could you suggest me some courses? – L. Kvri Jan 30 '19 at 16:28

siddharth bhardwaj · Answer 2 · 2020-04-25T13:02:52.653

1

That alone didn't work for me I added ngModel in my input too. Without ngModel I think you can't validate your forms... whether it is a child or own component forms.

import { ControlContainer, NgForm } from '@angular/forms';

@Component({
  selector: 'app-documents'
  ...,
  viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]
})
export class AppDocumentsComponent {}

that works for me!!

edited Apr 25 '20 at 13:02

answered Apr 07 '20 at 22:25

siddharth bhardwaj

11
4

Angular 4 Template Driven nested form validation?

2 Answers2