angular - 하위 구성 요소 필드가 유효하지 않은 경우 상위 구성 요소 양식 제출 단추를 비활성화하는 방법

Template-Driven-Form 를 사용하면서 , Child components 를 확인하는 가장 좋은 방법   custom-Directive 를 만드는 것입니다 이렇게하면 Child-Component-Form에서 확인할 각 필드에 항상 추가 할 수 있습니다.

이것을 사용할 수 있습니다 :

import {Directive, OnInit} from '@angular/core';
import {NgControl, NgForm, NgModel} from "@angular/forms";
/**
 * This attribute directive must be used to each input-field of a childComponent.
 * That input-field must contain a NgModel attribute, else the application must throw an error
 * Usage: (<input class="form-control" type="text" registerChildComponentToForm
 *          [(ngModel)]="testname" name="testname" required />
 */
@Directive({
    selector: '[registerChildComponentToForm]',
    providers: [NgModel]
})
export class RegisterTemplateFormModelDirective implements OnInit {
    constructor(private form: NgForm, private eltControl: NgControl) {
    }
    ngOnInit() {
        if (this.form && this.eltControl) {
            this.form.form.addControl(this.eltControl.name, this.eltControl.control);
        }
    }
}

그런 다음 declarations 에 등록하십시오.  그리고 exports  당신의 App-Module 에서

declarations: [
        RegisterTemplateFormModelDirective,
        ...
],
exports: [
        RegisterTemplateFormModelDirective,
        ...
]

당신의 <app-input-text> 를 제공  이 HTML 입니까  코드를 입력하면 directive 를 사용해야합니다. (와이즈 와이즈) ) 이렇게 :

registerChildComponentToForm

부모 구성 요소 HTML

<input id="iban" name="iban" [(ngModel)]="bank.iban" #ibanRef="ngModel" 
  [required]="isMandatory" registerChildComponentToForm/>

부모 구성 요소 TS

<app-input-text [(sharedVar)]="dashboardDetails.Text1" (sharedVarChange)="sharedVarChangeHandle($event)" ...

부모 구성 요소 HTML

sharedVarChangeHandle($event) {
    // by evaluating the value passed you can update a variable (ex: disableSubmit)
}

자식 구성 요소 ts

<input type="submit" value="Save" [disabled]="!disableSubmit" class="bt .....

valid // this is a public variable change(newValue) { this.sharedVar = newValue; this.sharedVarChange.emit(newValue); // here conditioanally update the **valid** variable (true or false) }