Comment ajouter un modèle de validation de formulaire en Angular 2?

j'ai un formulaire simple qui doit valider si le début et la fin de l'entrée n'est pas l'espace.

En HTML5, je vais faire ceci:

<input type="text" pattern="^(?!s|.*s$).*$">

Quelle est la bonne propriété pour le motif de validation dans la nouvelle directive Angular 2 ngControl? L'API bêta officielle manque encore de documentation sur cette question.

37
demandé sur Matheus Lacerda 2016-01-01 22:17:32

5 réponses

Maintenant, vous n'avez pas besoin d'utiliser FormBuilder et tous ces trucs compliqués d'angle de valiation. J'ai mis plus de détails de ceci (Angular 2.0.8 - 3march2016): https://github.com/angular/angular/commit/38cb526

Exemple de repo :

<input [ngControl]="fullName" pattern="[a-zA-Z ]*">

je l'ai tester et ça fonctionne :) - voici mon code:

<form (ngSubmit)="onSubmit(room)" #roomForm='ngForm'  >
...
<input 
  id='room-capacity' 
  type="text" 
  class="form-control" 
  [(ngModel)]='room.capacity' 
  ngControl="capacity" 
  required
  pattern="[0-9]+" 
  #capacity='ngForm'>

UPDATE June 2017

je veux juste dire qu'actuellement, lorsque j'ai plus d'expérience, je usally utilisation suivant l'approche "bon marché" de la validation des données:

la Validation est seulement du côté du serveur (pas du tout angulaire!) et si quelque chose ne va pas, alors server (Restful API) renvoie un code d'erreur E. g HTTP 400 et suivant l'objet json dans le corps de réponse (que dans l'angle je mets à err variable):

this.err = { 
    "capacity" : "too_small"
    "filed_name" : "error_name", 
    "field2_name" : "other_error_name",
    ... 
}

(si le serveur renvoie une erreur de validation dans un format différent, alors vous pouvez facilement l'associer à la structure ci-dessus)

dans le modèle html j'utilise une étiquette séparée (div/span / small etc.)

<input [(ngModel)]='room.capacity' ...>
<small *ngIf="err.capacity" ...>{{ translate(err.capacity) }}</small>

comme vous le voyez, lorsqu'il y a une erreur dans 'capacity', alors tag with error translation (to user language) sera visible. Cette approche ont des avantages suivants:

  • c'est très simple
  • en angle, Nous ne doublons pas le code de validation qui est (et doit être) dans le serveur (dans le cas de la validation regexp, cela peut empêcher ou compliquer ReDoS attaques)
  • nous avons le plein contrôle sur la façon dont l'erreur sera affiché à l'utilisateur (ici comme egzample <small> la balise
  • parce que dans la réponse du serveur, nous revenons error_name (au lieu du message d'erreur direct), nous pouvons facilement changer le message d'erreur (ou le traduire) en modifiant seulement le code frontend-angulaire (ou les fichiers avec des traductions). Donc, dans ce cas, nous n'avons pas besoin de toucher le code d'arrière-plan/serveur.

bien sûr, parfois (si cela est nécessaire - par exemple. champ retypePassword qui n'est jamais envoyé pour le serveur) je fais des exceptions de l'approche ci-dessus et de faire la validation de certains angulaire (mais similaires,"this.err " mécanisme pour montrer les erreurs (donc je n'utilise pas pattern l'attribut directement dans input tag mais plutôt je fais la validation regexp dans une méthode component après que l'utilisateur élève l'événement approprié comme input-change ou save) .

46
répondu Kamil Kiełczewski 2017-09-20 12:42:45

Depuis la version 2.0.0-bêta.8 (2016-03-02), L'angle inclut maintenant un Validators.pattern validateur regex.

voir le CHANGELOG

9
répondu Chris Snowden 2018-03-30 06:38:13

vous pouvez construire votre formulaire en utilisant FormBuilder car il vous permet une manière plus flexible de configurer le formulaire.

export class MyComp {
  form: ControlGroup;

  constructor(@Inject()fb: FormBuilder) {  
    this.form = fb.group({  
      foo: ['', MyValidators.regex(/^(?!\s|.*\s$).*$/)]  
    });  
  }

Puis dans votre template :

<input type="text" ngControl="foo" />
<div *ngIf="!form.foo.valid">Please correct foo entry !</div>

vous pouvez aussi personnaliser la classe ng-invalid css.

comme il n'y a en fait aucun validateur pour regex, vous devez écrire le vôtre. C'est une fonction simple qui prend un contrôle en entrée, et renvoie null si valide ou StringMap si invalide.

export class MyValidators {
  static regex(pattern: string): Function {
    return (control: Control): {[key: string]: any} => {
      return control.value.match(pattern) ? null : {pattern: true};
    };
  }
}

J'espère que ça vous aidera.

8
répondu gentiane 2016-01-31 00:03:42

validation personnalisée, étape par étape

modèle Html 

  <form [ngFormModel]="demoForm">
  <input  
  name="NotAllowSpecialCharacters"    
  type="text"                      
  #demo="ngForm"
  [ngFormControl] ="demoForm.controls['spec']"
  >

 <div class='error' *ngIf="demo.control.touched">
   <div *ngIf="demo.control.hasError('required')"> field  is required.</div>
   <div *ngIf="demo.control.hasError('invalidChar')">Special Characters are not Allowed</div>
 </div>
  </form>

Composant D'Application.ts

import {Control, ControlGroup, FormBuilder, Validators, NgForm, NgClass} from 'angular2/common';
import {CustomValidator} from '../../yourServices/validatorService';

le cadre de la classe définir 

 demoForm: ControlGroup;
constructor( @Inject(FormBuilder) private Fb: FormBuilder ) {
    this.demoForm = Fb.group({
       spec: new Control('', Validators.compose([Validators.required,   CustomValidator.specialCharValidator])),
      })
}

{../../ your services / validatorService.ts}

export class CustomValidator {
    static specialCharValidator(control: Control): { [key: string]: any } {
   if (control.value) {
       if (!control.value.match(/[-!$%^&*()_+|~=`{}\[\]:";#@'<>?,.\/]/)) {            
           return null;
       }
       else {            
           return { 'invalidChar': true };
       }
   }

 }

 }
5
répondu mani R 2016-06-21 07:09:34

Ma solution Angulaire 4.0.1: il suffit de montrer l'INTERFACE utilisateur pour les CVC entrée - où le CCF doit être exactement 3 chiffres:

    <form #paymentCardForm="ngForm">         
...
        <md-input-container align="start">
            <input #cvc2="ngModel" mdInput type="text" id="cvc2" name="cvc2" minlength="3" maxlength="3" placeholder="CVC" [(ngModel)]="paymentCard.cvc2" [disabled]="isBusy" pattern="\d{3}" required />
            <md-hint *ngIf="cvc2.errors && (cvc2.touched || submitted)" class="validation-result">
                <span [hidden]="!cvc2.errors.required && cvc2.dirty">
                    CVC is required.
                </span>
                <span [hidden]="!cvc2.errors.minlength && !cvc2.errors.maxlength && !cvc2.errors.pattern">
                    CVC must be 3 numbers.
                </span>
            </md-hint>
        </md-input-container>
...
<button type="submit" md-raised-button color="primary" (click)="confirm($event, paymentCardForm.value)" [disabled]="isBusy || !paymentCardForm.valid">Confirm</button>
</form>
1
répondu mkaj 2017-04-10 02:42:32