0

Dans mon angulaire 4 app, j'ai une custom form validator qui ressemble à ceci:angulaire des formes réactives et erreur validateur personnalisé

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

export function myCustomValidator(myCustomArg: string): ValidatorFn { 
    return (control: AbstractControl): ValidationErrors | null => { 

    if (control.value) { 
     // do some checks with control.value and myCustomArg 
     // return error if needed 
    } 

    // return null otherwise 
    control.setErrors(null); 
    return null; 
    }; 
} 

mais lorsque je tente de l'utiliser dans un de mes reactive forms:

ngOnInit() { 
    this.form = new FormGroup({ 
     'myControl': new FormControl(null, [ myCustomValidator(...) ]), 
     // ... 
    }); 
    } 

Je reçois plusieurs erreurs:

ERROR TypeError: Cannot read property 'emit' of undefined at FormControl.webpackJsonp.../../../forms/@angular/forms.es5.js.AbstractControl._updateControlsErrors (forms.es5.js:2836) at FormControl.webpackJsonp.../../../forms/@angular/forms.es5.js.AbstractControl.setErrors (forms.es5.js:2772) at file-extension.validator.ts:17 at forms.es5.js:506 at Array.map() at _executeValidators (forms.es5.js:506) at FormControl.validator (forms.es5.js:462) at FormControl.webpackJsonp.../../../forms/@angular/forms.es5.js.AbstractControl._runValidator (forms.es5.js:2720) at FormControl.webpackJsonp.../../../forms/@angular/forms.es5.js.AbstractControl.updateValueAndValidity (forms.es5.js:2688) at new FormControl (forms.es5.js:3011)


ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 0, nodeDef: {…}, elDef: {…}, elView: {…}}


ERROR Error: formGroup expects a FormGroup instance. Please pass one in.

Mais malheureusement, ils ne sont pas très utiles.

Répondre

0

Le problème est lié à la manière dont le validateur est affecté au champ. En fait, le validateur tente d'accéder à la valeur control.value du contrôle.

Mais lorsque la fonction usine de validateur est appelé, le contrôle n'existe pas encore:

this.form = new FormGroup({ 
    'myControl': new FormControl(null, [ myCustomValidator(...) ]), 
    // ... 
}); 

Ainsi, afin de résoudre le problème, juste créer la première forme et puis affecter le validateur :

ngOnInit() { 
    // first create the form with its controls 
    this.form = new FormGroup({ 
    'myControl': new FormControl(null), 
    // ... 
    }); 

    // then assign the custom validator 
    this.form.get('myControl').setValidators([ 
    myCustomValidator(...), 
    ]); 
}