Question

我有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，但如果我对子进行更改，则脏状态不会更改。如何在模板驱动的嵌套控件中进行验证？

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

对我有用！

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

2 个答案: