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?

yurzui · Accepted Answer · 2017-10-27 15:10:32Z

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 {}

6 Comments

xaisoft Over a year ago

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

L. Kvri Over a year ago

How can I implement it in that case if I have more nested parts (forms) below the main form?

yurzui Over a year ago

@Laszlo Can you provide an example on stackblitz?

L. Kvri Over a year ago

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.

yurzui Over a year ago

@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 ng-run.com/edit/YLSx6OJVKYUbXQTsWOx2

|

siddharth bhardwaj · Accepted Answer · 2020-04-25 13:02:52Z

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, 2020 at 13:02

answered Apr 7, 2020 at 22:25

siddharth bhardwaj

114 bronze badges

Collectives™ on Stack Overflow

Angular 4 Template Driven nested form validation?

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related