Validieren von verschachtelten Formularen in Angular 2

Question

Ich habe eine Form, die drei Komponenten enthält. Das Folgende ist der HTML-Code des Formulars:

<div class="p-r-0 m-t-1 p-r-half p-l-half"> 
    <div class="tab-content">   
     <div *ngIf="vitalsData != null"> 
      <emp-info *ngIf="far == '1'" [(dataContext)]="empData"></emp-info> 
      <emp-work *ngIf="sections == '2'" [(dataContext)]="empData"></faa-ch145> 
     </div> 
    </div> 
    <div class="right pull-top pos-relative"> 
      <button class="btn btn-primary" type="button">Reset</button> 
      <button class="btn btn-primary" type="button">Save</button> 
    </div> 
</div> 

Es gibt zwei Komponenten emp-info und emp-work. Die emp-info und emp-work Seiten haben einige Pflichtfelder. Jetzt, wenn ich die erforderlichen Felder speichern, sollte validiert werden. Aber ich habe die erforderlichen Felder in der untergeordneten Komponente und die Schaltfläche zum Speichern in der übergeordneten Komponente. Kann mir jemand sagen, wie wir Fehler für die Felder in der Kindkomponente validieren und anzeigen können.

Answer 1

Angular Forms validiert nicht die internen Komponenten der Komponente. Wenn Sie validieren möchten emp-info | emp-work Komponenten dann sollten sie implementieren ControlValueAccessor. Somit kann Angular mit der benutzerdefinierten Komponente arbeiten (es wird voll funktionsfähig sein).

Eine weitere Option, die meiner Meinung nach besser geeignet ist, wenn benutzerdefinierte Komponenten nur Container sind, besteht darin, die FormGroup-Instanz zu übergeben und damit interne Formularsteuerelemente zu verbinden. Überprüfen Sie Angular Dokumentation zu diesem Thema:

https://angular.io/docs/ts/latest/cookbook/dynamic-form.html#!#question-form-components

Beachten Sie, wie die DynamicFormQuestionComponent die FormGroup Instanz empfängt.

Answer 2

emp-work und emp-info werden mit FormControl erstellt. Dann legen Sie beide innerhalb FormGroup. Innerhalb Ihrer Objektfabrik können Sie Validators.required Oder eines seiner Attribute verwenden.