web-dev-qa-db-ja.com

angular 5つのテンプレートフォームは、フォームの有効性ステータスの変更を検出します

reactive forms 含まれるフォームの有効性ステータスの変化をリッスンし、いくつかのコンポーネントのメソッドを実行できるコンポーネントを持つ方法

[disabled]="#myForm.invalid"のようなtemplateRefを使用すると、テンプレートの送信ボタンを簡単に無効にできますが、これにはコンポーネントのロジックは関係しません。

template forms 'doc を見て、方法が見つかりませんでした

angularformsangular5angular-reactive-formsangular-forms
19
Cec

statusではなくvalueのみを取得する場合は、statusChangesを使用できます。

export class Component {

    @ViewChild('myForm') myForm;

    this.myForm.statusChanges.subscribe(
        result => console.log(result)
    );
}

データの変更が必要な場合は、valueChangesのformにサブスクライブし、this.myForm.statusを使用してフォームのステータスを確認できます。

export class Component {

    @ViewChild('myForm') myForm;

    this.myForm.valueChanges.subscribe(
        result => console.log(this.myForm.status)
    );
}

ステータスの可能な値は次のとおりです：VALID、INVALID、 保留中、またはDISABLED。

これは同じもののリファレンスです

32
Sravan

このようなことを行うと、有効性の変更を検出し、フォームがVALIDであるかINVALIDであるかに基づいてメソッドを実行できます。

this.myForm.statusChanges
  .subscribe(val => this.onFormValidation(val));

onFormValidation(validity: string) {
  switch (validity) {
    case "VALID":
      // do 'form valid' action
      break;
    case "INVALID":
      // do 'form invalid' action
      break;
  }
}
3
Chris Halcrow

フォーム全体の変更をサブスクライブし、そこにロジックを実装できます。

@ViewChild('myForm') myForm;

this.myForm.valueChanges.subscribe(data => console.log('Form changes', data));
1
ritaj