각도로 부모 구성 요소의 유효성을 검사하는 방법?

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> 

난, 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; 
    } 
}