このコードを考えると角度2 FormGroup

Question

からすべての検証エラーを取得しますか？

私は単体テストを書いており、実際の検証エラーをアサーションメッセージに含める必要があります。

Answer 1

私は同じ問題に会ったし、すべての検証エラーを発見し、それらを表示するために、私は次の方法を書いた：

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(..)を必要なものに置き換えてください。

Answer 2

this.form.errorsプロパティを反復処理できます。

Answer 3

export class GenericValidator { 
    constructor(private validationMessages: { [key: string]: { [key: string]: string } }) { 
    } 

processMessages(container: FormGroup): { [key: string]: string } { 
    const messages = {}; 
    for (const controlKey in container.controls) { 
     if (container.controls.hasOwnProperty(controlKey)) { 
      const c = container.controls[controlKey]; 
      if (c instanceof FormGroup) { 
       const childMessages = this.processMessages(c); 
       // handling formGroup errors messages 
       const formGroupErrors = {}; 
       if (this.validationMessages[controlKey]) { 
        formGroupErrors[controlKey] = ''; 
        if (c.errors) { 
         Object.keys(c.errors).map((messageKey) => { 
          if (this.validationMessages[controlKey][messageKey]) { 
           formGroupErrors[controlKey] += this.validationMessages[controlKey][messageKey] + ' '; 
          } 
         }) 
        } 
       } 
       Object.assign(messages, childMessages, formGroupErrors); 
      } else { 
       // handling control fields errors messages 
       if (this.validationMessages[controlKey]) { 
        messages[controlKey] = ''; 
        if ((c.dirty || c.touched) && c.errors) { 
         Object.keys(c.errors).map((messageKey) => { 
          if (this.validationMessages[controlKey][messageKey]) { 
           messages[controlKey] += this.validationMessages[controlKey][messageKey] + ' '; 
          } 
         }) 
        } 
       } 
      } 
     } 
    } 
    return messages; 
} 
} 

私はDeborahkから取り出して少し修正しました。

Answer 4

これがサポートする内部FormGroup（like here）

でテスト

とソリューションです：アンギュラ4.3.6

import { AbstractControl, FormGroup, ValidationErrors } from '@angular/forms'; 

export interface AllValidationErrors { 
    control_name: string; 
    error_name: string; 
    error_value: any; 
} 

export interface FormGroupControls { 
    [key: string]: AbstractControl; 
} 

export function getFormValidationErrors(controls: FormGroupControls): AllValidationErrors[] { 
    let errors: AllValidationErrors[] = []; 
    Object.keys(controls).forEach(key => { 
    const control = controls[ key ]; 
    if (control instanceof FormGroup) { 
     errors = errors.concat(getFormValidationErrors(control.controls)); 
    } 
    const controlErrors: ValidationErrors = controls[ key ].errors; 
    if (controlErrors !== null) { 
     Object.keys(controlErrors).forEach(keyError => { 
     errors.push({ 
      control_name: key, 
      error_name: keyError, 
      error_value: controlErrors[ keyError ] 
     }); 
     }); 
    } 
    }); 
    return errors; 
} 

を-フォームバリデーション - errors.ts取得例を使用して：

if (!this.formValid()) { 
    const error: AllValidationErrors = getFormValidationErrors(this.regForm.controls).shift(); 
    if (error) { 
    let text; 
    switch (error.error_name) { 
     case 'required': text = `${error.control_name} is required!`; break; 
     case 'pattern': text = `${error.control_name} has wrong pattern!`; break; 
     case 'email': text = `${error.control_name} has wrong email format!`; break; 
     case 'minlength': text = `${error.control_name} has wrong length! Required length: ${error.error_value.requiredLength}`; break; 
     case 'areEqual': text = `${error.control_name} must be equal!`; break; 
     default: text = `${error.control_name}: ${error.error_name}: ${error.error_value}`; 
    } 
    this.error = text; 
    } 
    return; 
} 

Answer 5

それとも、ただそれからちょうどすべてのあなたのエラー

const errorsFlat = SuperForm.getAllErrorsFlat(fg); 
console.log(errors); 

Answer 6

// IF not populated correctly - you could get aggregated FormGroup errors object 
let getErrors = (formGroup: FormGroup, errors: any = {}) { 
    Object.keys(formGroup.controls).forEach(field => { 
    const control = formGroup.get(field); 
    if (control instanceof FormControl) { 
     errors[field] = control.errors; 
    } else if (control instanceof FormGroup) { 
     errors[field] = this.getErrors(control); 
    } 
    }); 
    return errors; 
} 

// Calling it: 
let formErrors = getErrors(this.form); 

Answer 7

をフェッチするためにFormGroupを渡す

npm install --save angular-super-validator 

にも深いとダイナミックなフォームから、すべてのエラーを取得するには、このライブラリを使用することができます私はangle 5を使用しています。FormGroupを使用してフォームのステータスプロパティを確認するだけで済みます。

this.form = new FormGroup({ 
     firstName: new FormControl('', [Validators.required, validateName]), 
     lastName: new FormControl('', [Validators.required, validateName]), 
     email: new FormControl('', [Validators.required, validateEmail]), 
     dob: new FormControl('', [Validators.required, validateDate]) 
    }); 

すべてのフィールドがすべての検証ルールを通過しない限り、this.form.statusは "INVALID"になります。

リアルタイムの変化を検出するのが最も重要な部分です。