web-dev-qa-db-fra.com

Angular 2 Validation de formulaire pour les nombres minimum et maximum

J'ai un formulaire avec des zones de saisie. Les zones de saisie sont à la fois en texte et en chiffres. Et je dois les valider et j'ai suivi cela tutoriel et j'ai essayé de les valider.

Selon cela, si je dois valider une chaîne, je peux utiliser le groupe de contrôle comme suit.

constructor(fb: FormBuilder){
    this.complexForm = fb.group({
      'firstName' : [null, Validators.required],
      'lastName': [null, Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(10)])]
})

Et le code HTML pour cela comme suit ...

<form [formGroup]="complexForm" (ngSubmit)="submitForm(complexForm.value)">
      <div class="form-group">
        <label>First Name:</label>
        <input class="form-control" type="text" placeholder="John" [formControl]="complexForm.controls['firstName']">
      </div>
      <div class="form-group">
        <label>Last Name</label>
        <input class="form-control" type="text" placeholder="Doe" [formControl]="complexForm.controls['lastName']">
      </div>
      <div class="form-group">
        <button type="submit" class="btn btn-default">Submit</button>
      </div>
</form>

Mais je dois également valider une boîte de saisie de type numérique comme l'exemple suivant.

<form [formGroup]="complexForm" (ngSubmit)="submitForm(complexForm.value)">
          <div class="form-group">
            <label>Age:</label>
            <input class="form-control" type="number"  [formControl]="complexForm.controls['age']">
          </div>
          <div class="form-group">
            <button type="submit" class="btn btn-default">Submit</button>
          </div>
</form>

Mais le problème est qu'il n'y a pas d'option pour les validateurs pour sélectionner la valeur minimale et la valeur maximale pour l'entrée.

existe-t-il quelqu'un qui a une solution à ce problème?

Merci.

javascriptformsvalidationangulartypescript
10
Dilanka Rathnayake

Il n'y a pas de validateur intégré pour min/max actuellement, vous pouvez vérifier le source pour Validator pour voir ce qui est disponible.

Ce que vous pouvez faire est de créer une fonction de validation personnalisée en suivant les tutoriels dans les documents officiels

Exemple:

export function maxValue(max: Number): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} => {
    const input = control.value,
          isValid = input > max;
    if(isValid) 
        return { 'maxValue': {max} }
    else 
        return null;
  };
}

Avec cela, vous pouvez mettre à jour votre code

constructor(fb: FormBuilder){
this.complexForm = fb.group({
  'firstName' : [null, Validators.required],
  'lastName': [null, Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(10)])],
  'age': [null, maxValue(60)]
})
11
jkris

La version actuelle de angular 4 a maintenant valideurs min et max

C'est aussi simple que d'écrire

this.complexForm = fb.group({
   age:[null,[Validators.required, Validators.min(5),Validators.max(90)]],
})

N'oubliez pas que c'est sur le @angular/forms repo

$: npm uninstall @angular/forms --save
$: npm install @angular/forms --save
21
user1752532

Si je comprends bien votre problème, essayez d'inclure également les exigences de vos valideurs dans HTML afin que votre code se présente comme suit:

<form [formGroup]="complexForm" (ngSubmit)="submitForm(complexForm.value)">
  <div class="form-group">
    <label>Age:</label>
    <input class="form-control" type="number" required minlength="5" maxlength="10" [formControl]="complexForm.controls['age']">
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-default">Submit</button>
  </div>
</form>
4
Marcin