得到角2 FormGroup

Question

所有驗證錯誤，鑑於此代碼：

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

我怎樣才能得到this.form所有驗證錯誤？

我正在編寫單元測試，並希望在斷言消息中包含實際的驗證錯誤。

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

得到形式驗證-errors.ts

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; 
} 

使用示例：

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

或者，你可以使用這個庫來獲取所有的錯誤，甚至深刻的和動態的形式

npm install --save angular-super-validator 

然後，只需通過FormGroup獲取所有你的錯誤

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

我使用的是角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」。

最好的部分是它可以實時檢測到變化。