Comment identifier la fonction de validation personnalisée qui provoque une erreur dans les formulaires réactifs

Question

J'ai le nombre de validateurs assignés à un formControl avec formControlName comme prénom. Comment savoir quelle validation donne erreur afin que je puisse donner un message approprié

Suite est ma fait fonction de validation personnalisée pour nécessaire

export function required() { 
    return function(control:FormControl) 
    { 
    var value: string = control.value; 
    value = value.trim(); 
    if(value.length == 0) 
     return {required:true};  
    return null; 
    } 
} 

et l'utilisation est comme ce

<md-error [hidden]="!firstName.errors.required || (!firstName.touched && !submitted)"> 
    Name is required 
</md-error> 

Je reçois l'erreur suivante

ERROR TypeError: Cannot read property 'required' of null 

Answer 1

<md-error *ngIf="firstName.hasError('required') && (firstName.touched || submitted)"> 
    Please enter the required field 
</md-error> 

cela a fonctionné pour moi.

travail ne marche pas firstName.errors.required

merci pour toute l'aide.

s'il y a plusieurs validation échoue et plusieurs messages alors u peut montrer que le premier message d'erreur en ajoutant css

md-error:not(:first-of-type) { display: none; } 

Answer 2

Si vous utilisez Formulaire piloté par modèle L'approche mentionnée est obligatoire dans votre tag d'entrée.

<input type="text" class="form-control" #nameRef="ngModel" ngModel required name="name" placeholder="Enter Name"> 

ou en cas de forme réactive approche

this.userForm = this.fb.group({ 
     name:[[],[<any>Validators.required]], 
    }) 

Answer 3

Il est possible que votre errors peut être NULL vous devez donc utiliser un opérateur de navigation elvis ou sécurité: ?. comme ceci:

<md-error [hidden]="!firstName.errors?.required || (!firstName.touched && !submitted)"> 
    Name is required 
</md-error> 

Vous avez mentionné dans les commentaires:

je ne veux pas utiliser libraby validateurs, je veux utiliser des validateurs sur mesure, nécessaire est juste un exemple

Si vous ne comptez pas utiliser l'approche Reactive Forms mentionné dans Jverma's answer, vous devrez créer un Directive comme décrit dans this blog post (code approprié ci-dessous collé)

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

// validation function 
function validateJuriNameFactory() : ValidatorFn { 
    return (c: AbstractControl) => { 

    let isValid = c.value === 'Juri'; 

    if(isValid) { 
     return null; 
    } else { 
     return { 
      juriName: { 
       valid: false 
      } 
     }; 
    } 
} 

@Directive({ 
    selector: '[juriName][ngModel]' 
}) 
export class JuriNameValidator implements Validator { 
    validator: ValidatorFn; 

    constructor() { 
    this.validator = validateJuriNameFactory(); 
    } 

    validate(c: FormControl) { 
    return this.validator(c); 
    } 
} 

Answer 4

Vous pouvez ajouter des informations supplémentaires à l'objet d'erreur renvoyé par le validateur:

export function required(String info) { 
    return function(control:FormControl) 
    { 
    var value: string = control.value; 
    value = value.trim(); 
    if(value.length == 0) 
     return {required:true, info: info};  
    return null; 
    } 
} 

his.userForm = this.fb.group({ 
    name:[[],[<any>required('firstName')]], 
}) 

<md-error [hidden]="!firstName.errors.required || (!firstName.touched && !submitted)"> 
    <div *ngFor="let err of firstName.errors"> 
    {{error?.info}} 
    </div> 
</md-error>