web-dev-qa-db-ja.com

Angular 2：親コンポーネントの子コンポーネントフォームフィールドを検証します

問題ステートメント：

親コンポーネントには<form>タグといくつかの<input>タグがあり、子コンポーネントにもいくつかの<input>タグがあり、親コンポーネントには1つの<submit>があり、送信時にフォームフィールドを検証していますフォーム。

フォームの親コンポーネントの子コンポーネント<input>フィールドをsubmitで検証する方法は？

要件：

親コンポーネントに、テンプレートにinputコンポーネントを含む子コンポーネントを含むフォームがある場合、これらのinputコンポーネントは、親コンポーネントから送信する場合、クリックで検証する必要があります。

調査結果：

SOに同じ問題文がありますが、適切な解決策が見つかりませんでした。以下のすべての投稿はフォーム全体を検証しますが、私の要件は子コンポーネントの各フィールドを検証することです。

javascriptangulartypescriptangular2-formsangular-validation
8
Rohit Jindal

template drivenテクニックを使用しても実現できます。以下の手順を見つけます：

  • 親コンポーネントから子コンポーネントに、送信ボタンイベントを渡す必要があります。

    <button type="button" (click)="enterForm(parentForm)">Submit</button>

    ここで、parentFormはフォーム参照です。

  • 送信のクリック時にsubmit button eventを渡すために、親から@ViewChildデコレータを使用して子コンポーネントメソッドを呼び出します。

    @ViewChild('validateChildComponentForm') private ChildComponent: ChildComponent;

  • @ViewChildデコレーターを使用して子フォームの参照を子コンポーネントに渡します。

    @ViewChild('smartyStreetForm') form;

enterForm(parentForm) {
    this.submitted = true;
    this.ChildComponent.validateChildForm(this.submitted);
    if(!parentForm.valid || !this.childFormValidCheck) {
        return;
    } else {
       // success code comes here.
    }                
}

  • 次に、子コンポーネントメソッドで、親フォームが送信され、子コンポーネントフォームが有効かどうかを確認し、trueを発行します。それ以外の場合はfalseを親コンポーネントに発行します。 @Outputデコレーターを使用して、isChildFormValid値を親コンポーネントに放出します。

    @Output() isChildFormValid: EventEmitter<any> = new EventEmitter<any>();

public validateChildForm(data: any) {
    if (data === true) {
        if(this.form.valid === true) {
            this.isChildFormValid.emit(true);
        } else {
            this.isChildFormValid.emit(false);
        }
    }
}

  • 次に、親コンポーネントでisChildFormValid値を取得します。

    private isChildFormValid(formValid: any) {
    this.childFormValidCheck = formValid;
}

図解：

enter image description here

13
Rohit Jindal