web-dev-qa-db-fra.com

Obtenir le nom du contrôle de formulaire

Je travaille avec des formulaires réactifs en angulaire, j'ai besoin de comparer la date de début "date de début" avec la date de fin "date de fin", les deux contrôles sont validés dans la fonction "dateLessThan", mais le problème est que je ne sais pas comment demander le contrôle évalue

//Some stuff
public fechaInicio = new FormControl('', [
    Validators.required    
    , this.dateLessThanTo

]);
public fechaFin = new FormControl('', [
    Validators.required     
    , this.dateLessThan
]);



 createForm() {
    this.contratoForm = this.formBuilder.group({    
        fechas: this.formBuilder.group({
            fechaInicio: this.fechaInicio,
            fechaFin: this.fechaFin
        }, { validator: this.dateLessThan('fechaInicio', 'fechaFin') }),          

    });
}

Ici, j'ai besoin de connaître le nom du contrôle pour comparer les dates:

 dateLessThanTo(fieldControl: FormControl) {
    //
    //if (fechaInicio.value > FechaFin.value){
    //      return true;
    //}
    //else{
    //  return false;
    //  }

}

//Some stuff
angularreactive-forms
6
ararb78

Dans votre validateur personnalisé, vous obtenez le formGroupfechas, vous n'avez donc pas besoin de passer de paramètres à partir du code TS:

 createForm() {
    this.contratoForm = this.formBuilder.group({    
        fechas: this.formBuilder.group({
            fechaInicio: this.fechaInicio,
            fechaFin: this.fechaFin
        }, { validator: this.dateLessThanTo }),          

    });
}

et dans votre validateur personnalisé:

dateLessThanTo(group: FormGroup) {
   if (group.controls.fechaInicio.value > group.controls.fechaFin.value){
     return {notValid: true}
   }
   return null;
}

Vous devez renvoyer null lorsqu'elle est valide et définir une erreur, par exemple notValid lorsqu'elle ne l'est pas.

3
AJT82

Obtenez le groupe parent du contrôle, puis comparez-le au contrôle actuel:

  dateLessThanTo(control: AbstractControl) { 
    let name = this.getName(control);

    ...
  }

  private getName(control: AbstractControl): string | null {
    let group = <FormGroup>control.parent;

    if (!group) {
      return null;
    }

    let name: string;

    Object.keys(group.controls).forEach(key => {
      let childControl = group.get(key);

      if (childControl !== control) {
        return;
      }

      name = key;
    });

    return name;
  }
5
jcroll

Vous pouvez le faire avec:

Object.getOwnPropertyNames(this.contratoForm['controls']['fechas']['controls']).map((key: string) => { 
// Something like this. Not sure how your form looks like
0
Swoox

dans votre composant, vous pouvez ajouter un validateur personnalisé comme celui-ci

static customValidator(control: AbstractControl): { [key: string]: any } {
const controlName = (Object.keys(control.parent.controls).find(key => control.parent.controls[key] === control));
if (control.value === 0) {
  return {key: {error: 'invalid'}};
}
return null; }

dans controlName, vous aurez le nom de votre contrôle.

0
Mariano Calcagno

vous avez juste à faire comme ça, vous pouvez inspecter un FormControl individuel dans un formulaire en l'extrayant avec la méthode .get ().

contratoForm.get('fechaInicio').value 


 dateLessThanTo(fieldControl: FormControl) {
   let va= fieldControl.get('fechaInicio').value ;
   let va1 = fieldControl.get('FechaFin').value ; 
}

vérifiez ici: https://angular.io/guide/reactive-forms#inspect-formcontrol-properties

0
Pranay Rana