web-dev-qa-db-fra.com

Angular 5: Valider plusieurs champs de saisie en faisant la somme des valeurs

Je souhaite valider plusieurs champs de saisie de nombres en résumant leurs valeurs et créer un validateur personnalisé pour Angular.

Chaque entrée ressemble à ceci:

<input type="number" min="0" max="10">

Il existe plusieurs entrées numériques et tout le monde peut avoir une valeur comprise entre 0 et 10, mais la somme de tous les champs doit être inférieure ou égale à 10.

J'ai une fonction qui renvoie vrai si la somme de tous les champs de saisie est inférieure ou égale à 10. Mais comment y parvenir avec un validateur personnalisé Angular? Pour que le message d'erreur apparaisse instantanément.

angularvalidationangular5
4
Lars

Comme mentionné, la validation d'ensemble sur le groupe lui-même, par exemple:

this.myForm = fb.group({
  field1: [null],
  field2: [null]
  // more fields 
}, {validator: this.myValidator})

Ensuite, dans votre validateur, parcourez les contrôles de formulaire de votre groupe, récapitulez et renvoyez l'erreur ou la variable null en fonction de la valeur valide ou non:

myValidator(group: FormGroup) {
  let sum = 0;
  for(let a in group.controls) {
    sum += group.get([a]).value;
  }
  return sum > 10 ? { notValid: true} : null
}

et dans le modèle, vous pouvez afficher une erreur avec: 

*ngIf="myForm.hasError('notValid')"

StackBlitz

10
AJT_82

En supposant que vous utilisez des formulaires réactifs ( https://angular.io/guide/reactive-forms ) comme mentionné ci-dessus, vous pouvez créer un validateur personnalisé pouvant être attaché au groupe, de la manière suivante:

this.formbuilder.group({...}, { validator: someCustomValidator })

Le validateur personnalisé ressemblerait à quelque chose comme ça

export const numberMatcher = (control: AbstractControl): {[key: string]: boolean} => 
{
  const number = control.get('number');
  const number2 = control.get('number2');
  return number + number2 < 10 ? null : { exceedsmax: true };
};

Ce qui doit être importé dans votre composant (ou existe à l'intérieur de celui-ci) 

  import { numberMatcher } from './numberMatcher';
  ngOnInit() {
    this.form = this.formbuilder.group({
      number: ['', Validators.required],
      number2: ['', Validators.required],
     { validator: emailMatcher })
    });
  }

Ensuite, configurez votre formulaire normalement, en vous assurant que le nom formControlName correspond au nom en cours de vérification dans le validateur. Vous pouvez alors vérifier normalement l’erreur c’est-à-dire.

<div class="error" *ngIf="user.get('form').touched && user.get('form').hasError('exceededmax')">
  All fields must equal less than 10
</div>

par exemple. Je pense que, pour l’essentiel, cela résoudra votre problème, mais il faudra quelques ajustements et ajustements à partir du code très simple que j’ai écrit ici. 

1
Jack Scott

Si vous utilisez FormGroup

this.myForm = new FormGroup({
  field1: new FormControl(null, Validators.required),
  field2: new FormControl(null, Validators.required),
}, someCustomValidator);
0
carkod