Angular 4模板驱动的嵌套表单验证？答案

【问题标题】：Angular 4 Template Driven nested form validation?Angular 4模板驱动的嵌套表单验证？
【发布时间】：2018-04-09 05:44:52
【问题描述】：

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

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

如果我将所有输入都放在父组件中，则验证适用于所有内容。我正在尝试检查脏状态。现在，如果我对 Parent 进行更改，脏状态设置为 true，但如果我对子项进行更改，脏状态不会改变。如何在模板驱动的嵌套控件中进行验证？

【问题讨论】：

标签： angular

【解决方案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

【讨论】：

哇，太好了。我做了以下操作，只是将 ngModelGroup="documents" 添加到我的子组件中的容器 div 中，它可以工作。非常感谢！！！
如果我在主窗体下面有更多嵌套部分（窗体），我该如何实现它？
@Laszlo 你能提供一个关于 stackblitz 的例子吗？
我不能提供一个例子，想想吧，你有主表单，它包含更多的选项卡表，每个选项卡表都包含一个单独的组件，其中有很多数据输入字段。主表单上的提交按钮取决于各种选项卡上的所有必填字段。
@Laszlo 如果您有更多嵌套表单，那么您可能想要使用 ngModelGroup。它也可以像我的解决方案一样工作，但只有一个区别：您需要使用问题链接中的通用版本。这是一个例子ng-run.com/edit/YLSx6OJVKYUbXQTsWOx2

【解决方案2】：

仅此一项对我不起作用，我也在我的输入中添加了ngModel。如果没有ngModel，我认为您无法验证您的表单……无论是子表单还是自己的组件表单。

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

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

这对我有用！！

【讨论】：