角4模板驱动嵌套表单验证？

Question

我有两个组件，一个父组件和一个子组件。父组件包含以下内容：

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

子组件包含以下内容：

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

如果我将所有输入都放在父组件中，那么所有的验证都是有效的。我在试着检查肮脏的状态。现在，如果对父级进行更改，则脏状态设置为true，但如果对子节点进行更改，则脏状态不会更改。如何在模板驱动的嵌套控件中进行验证？

Answer 1

您可以在您的子组件上提供ControlContainer，如

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

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

另请参阅

• Angular2 nested template driven form

Answer 2

这本身并不适用于我，我也在我的输入中添加了ngModel。没有ngModel，我想你无法验证你的表格.无论是子组件还是自己的组件窗体。

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

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

这对我有用！！