Angular2でフォームバリデーターをトリガーする方法

angle2では、別のコントロールが変更されたときに、いくつかのコントロールのバリデーターをトリガーしたいと思います。フォームに再検証するように指示する方法はありますか？さらに良いことに、特定のフィールドの検証をリクエストできますか？

例：チェックボックスXと入力Pが与えられました。入力Pには、Xのモデル値に基づいて異なる動作をするバリデータがあります。Xがチェック/オフの場合、Pでバリデータを呼び出す必要があります。Pのバリデータはモデルを次のように調べます。 Xの状態を判別し、それに応じてPを検証します。

ここにいくつかのコードがあります：

constructor(builder: FormBuilder) {
    this.formData = { num: '', checkbox: false };

    this.formGp = builder.group({
        numberFld: [this.formData.num, myValidators.numericRange],
        checkboxFld: [this.formData.checkbox],
    });
}

this.formGp.controls['checkboxFld'].valueChanges.observer({
    next: (value) => {
        // I want to be able to do something like the following line:
        this.formGp.controls['numberFld'].validator(this.formGp.controls['numberFld']);
    }
});

誰かが解決策を持っていますか？ありがとう！

あなたがまだ答えを探しているかどうかはわかりませんので、ここに私の提案があります：

これを見てください：Angular 2-AbstractControl

私はあなたができることは次のとおりだと思います：

this.formGp.controls['checkboxFld'].valueChanges.observer({
    next: (value) => {
       this.formGp.controls['numberFld'].updateValueAndValidity();
    }
});

これにより、バリデーターがトリガーされて実行されます。さらに、状態も更新されます。これで、バリデーターロジック内のチェックボックス値を調べることができるはずです。

お役に立てれば！

編集：リンクと例を更新しました。答えを書いている間にコードが変更されました。

EDIT_2：alpha.48はEventEmitter.observerをEventEmitter.subscribeに変更します！

EDIT_3：実際の実装へのリンクを変更し、ドキュメントへのリンクを追加しました

Validaton-ガイド

FormControlドキュメント

私のControlGroupでこれを行うのは、タッチされているかどうかをチェックするエラーdivがあるためです。

for (var i in this.form.controls) {
  this.form.controls[i].markAsTouched();
}

（this.formは私のControlGroupです）

このブログの助けを借りて

ブログリンク

私はナイトキングの答えを組み合わせた解決策に出くわしました

Object.keys(this.orderForm.controls).forEach(field => {
       const control = this.orderForm.get(field);
       control.updateValueAndValidity();

});

this.orderFormはフォームグループです

これは私のためにトリックをしました

this.myForm.markAllAsTouched();

この動作をモデル化するより洗練された方法があります-たとえば、状態をReplaySubjectに入れてそれを監視し、次に状態を監視する非同期バリデーターを使用します-しかし、以下の疑似コード化されたアプローチは機能するはずです。チェックボックスの値の変化を観察し、必要に応じてモデルを更新してから、updateValueAndValiditycalを使用してnumberFldの再検証を強制するだけです。

constructor(builder: FormBuilder) {
  this.formData = { num: '', checkbox: false };
  const numberFld = builder.control(this.formData.num, myValidators.numericRange);

  const checkbox = builder.control(this.formData.checkbox);
  checkbox.valueChanges.map(mapToBoolean).subscribe((bool) => {
    this.formData.checked = bool;
    numberFld.updateValueAndValidity(); //triggers numberFld validation
  });

  this.formGp = builder.group({
      numberFld: numberFld,
      checkboxFld: checkbox
  });
}

static minMaxRange(min: number, max: number): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
        if (Validators.min(min)(control)) { // if min not valid
            return Validators.min(min)(control);
        } else {
            return Validators.max(max)(control);
        }
    };
}