1. ホーム
  2. angular

[解決済み] Angular 2のFormGroupからすべての検証エラーを取得する

2022-08-07 12:57:17

質問

このコードが与えられたとき

this.form = this.formBuilder.group({
  email: ['', [Validators.required, EmailValidator.isValid]],
  hasAcceptedTerms: [false, Validators.pattern('true')]
});

のバリデーションエラーをすべて取得するにはどうしたらよいでしょうか? this.form ?

ユニットテストを書いていて、アサートメッセージに実際の検証エラーを含めたいのですが、どうすればいいですか?

どのように解決するのですか?

私も同じ問題に遭遇し、すべてのバリデーションエラーを見つけ、表示するために、このメソッドを書きました。

getFormValidationErrors() {
  Object.keys(this.productForm.controls).forEach(key => {
    const controlErrors: ValidationErrors = this.productForm.get(key).errors;
    if (controlErrors != null) {
      Object.keys(controlErrors).forEach(keyError => {
       console.log('Key control: ' + key + ', keyError: ' + keyError + ', err value: ', controlErrors[keyError]);
      });
    }
  });
}

フォーム名 productForm は、フォームのインスタンス名に変更します。

このように動作します。フォームからすべてのコントロールをフォーマット {[p: string]: AbstractControl} という形式でフォームからすべてのコントロールを取得し、各エラーキーで反復処理し、エラーの詳細を取得します。これは null エラーの値はスキップされます。

また、テンプレートビューでバリデーションエラーを表示するように変更することもできます。 console.log(..) を必要なものに置き換えるだけです。