से कोणीय 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

आप इस.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 का उपयोग कर रहा हूं और आप फॉर्म समूह समूह का उपयोग करके अपने फॉर्म की स्थिति संपत्ति को आसानी से देख सकते हैं

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

यह.form.status "INVALID" होगा जब तक कि सभी फ़ील्ड सभी सत्यापन नियमों को पास न करें।

सबसे अच्छा हिस्सा यह है कि यह वास्तविक समय में परिवर्तनों का पता लगाता है।