親コンポーネントを角度で検証する方法は？

Question

私はコンポーネントがあり、内部には4〜5個のコンポーネントがあります。フォームの必須フィールドのいずれかが選択または入力されていない場合は、[保存]ボタンを無効にします。

<p-tabView> 
    <p-tabPanel header="General" [selected]="true"> 
     <data-general [data]="data" (modalSave)="childData($event)"> 
     </data-general> 
    </p-tabPanel> 
    <p-tabPanel header="Additional" *ngIf="this.isEditData"> 
     <data-additional [data]="data" (modalSave)="additionalValid($event)"> 
     </data-additional> 
    </p-tabPanel> 
    <p-tabPanel header="Test" *ngIf="this.isEditData"> 
     <test-component></test-component> 
    </p-tabPanel> 
    <p-tabPanel header="Test2" *ngIf="this.isEditData"> 
     <data-test2></data-test2> 
    </p-tabPanel> 
</p-tabView> 

<button type="submit" class="btn btn-primary" 
    [disabled]="!isFormValid()" (click)="onSubmitBtnClick()">Save</button> 

Iは、各フォームの妥当性を確認するプロパティを定義し、確認、方法isFormValidを実現しようとしました。私はできません。

data-general,data-additional,test-componentおよびdata-test2は子コンポーネントである。

Answer 1

私はそれが他の人を助けることができるように私の解決策を投稿し、問題を解決しました。

指令：

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

@Directive({ 
    selector: '[provide-parent-form]', 
    providers: [ 
     { 
      provide: ControlContainer, 
      useFactory: function (form: NgForm) { 
       return form; 
      }, 
      deps: [NgForm] 
     } 
    ] 
}) 
export class ProvideParentForm { } 

親要素のHTML：

<button type="submit" class="btn btn-primary" [disabled]="!formName.valid">Save</button> 

子コンポーネントのhtml： はdiv代わりの子コンポーネントでform持っています。

Answer 2

このようにしてみてください。

データgeneral.component.html

<form name="dataGeneralForm" role="form" novalidate (ngSubmit)="onSubmit(dataGeneralForm)" #dataGeneralForm="ngForm"> 
    <input type="text" class="form-control" [(ngModel)]="data.name" name="name" id="name" required /> 
    <button type="submit">Children Button</button> 
</form> 

データgeneral.component.ts

export class DataGeneralComponent { 

    data: any = {}; 

    @Output() modalSave = new EventEmitter(); 

    onSubmit(dataGeneralForm: NgForm) { 
     this.modalSave.next(dataGeneralForm); 
    } 

} 

parent.component.html ：

<p-tabView> 
    <p-tabPanel header="General" [selected]="true"> 
     <data-general (modalSave)="childData($event)"></data-general> 
    </p-tabPanel> 
</p-tabView> 
<button type="submit" class="btn btn-primary" [disabled]="!parentForm?.valid">Save</button> 

parent.component.ts

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

export class ParentComponent { 
    parentForm: NgForm; 

    childData(e) { 
     this.parentForm = e; 
    } 
}