web-dev-qa-db-ja.com

Angular form updateValueAndValidity of all children controls

Angular 4アプリでは、いくつかのコントロールを持つフォームがあります。

いくつかの時点で、それらの有効性の更新を強制する必要があるので、私はやっています:

_this.form.get('control1').updateValueAndValidity();
this.form.get('control2').updateValueAndValidity();
this.form.get('control3').updateValueAndValidity();
// and so on....
_

その後:

_this.form.updateValueAndValidity();
_

これは正常に動作します。

しかし、親フォームで1つのメソッドを呼び出すだけで、同じことを実現するより良い方法があるかどうか疑問に思っていました。

documentation によると、updateValueAndValidity()メソッド:

デフォルトでは、そのancestorsの値と有効性も更新します。

しかし、私の場合、その子孫の値と有効性を更新する必要があります。したがって、多くのコード行を取り除くことができます。

13
Francesco Borzi

現時点では、AbstractControlの子孫(FormGroupなど)をAbstractControl自体で更新することはできません。将来のリリースで可能になるかもしれません。

https://github.com/angular/angular/issues/617

https://github.com/angular/angular/issues/22166

更新:プルリクエストは既に開いています https://github.com/angular/angular/pull/19829

8
Gerros

コントロールを再帰し、手動で更新をトリガーすることで、あなたの問題に似た問題を解決しました。おそらくこれは最適な解決策ではありません。

private triggerValidation(control: AbstractControl) {
    if (control instanceof FormGroup) {
        const group = (control as FormGroup);

        for (const field in group.controls) {
            const c = group.controls[field];

            this.triggerValidation(c);
        }
    }
    else if (control instanceof FormArray) {
        const group = (control as FormArray);

        for (const field in group.controls) {
            const c = group.controls[field];

            this.triggerValidation(c);
        }
    }

    control.updateValueAndValidity({ onlySelf: false });
}
2
Pier
validateFormFields(fields) {
    try {
      Object.entries(fields.controls).forEach((control: any) => {
        if (typeof control[0] == 'Array' 
        ) {
          this.validateFormFields(control[1]);
        } else {
          if (control[1].controls) {
            Object.entries(control[1].controls).forEach((c: any) => {
              c[1].touched = true;
            });
          } else {
            control[1].touched = true;
          }

        }
      });
    } catch (e) {
      console.log(e);
    }
  }
0