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?

Answer 1

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

Answer 2

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!!