web-dev-qa-db-fra.com

Validation d'entrée avec modèle Angular 2

J'écris actuellement un formulaire simple en ionic 2 (Angular 2). Je me demandais comment j'ajouterais un modèle simple expression régulière à la validation:

J'ai essentiellement ceci:

<form>
    <ion-input stacked-label>
        <ion-label>{{label.msisdn}}</ion-label>
        <input type="text"
               [(ngModel)]="msisdn"
               ngControl="msisdnForm"
               required
               maxlength="10"
               minlength="10"
               pattern="06([0-9]{8})"
               #msisdnForm="ngForm"
        >
    </ion-input>
    <button [disabled]="!msisdnForm.valid" block (click)="requestActivationCode()">
        {{label.requestActivationCode}}
    </button>
</form>

La longueur maximale, la longueur minimale et la valeur requise sont récupérées (le bouton est désactivé si les conditions ne sont pas remplies). Maintenant, je veux limiter l'entrée à numérique et le préfixer avec 06 (numéro de téléphone néerlandais avec un nombre minimum de numéros).

Le motif n'est cependant pas repris dans la validation. Puis-je le faire de cette façon ou ai-je besoin d'une approche de code?

regexhtml5angularvalidationionic2
8
Mathijs Segers

Ajouter le motif à une variable

var pattern=/06([0-9]{8})/;

et y lier l'attribut

 <input type="text"
               [(ngModel)]="msisdn"
               ngControl="msisdnForm"
               required
               maxlength="10"
               minlength="10"
               [pattern]="pattern"
               #msisdnForm="ngForm"
        >

Il semble que ce PR https://github.com/angular/angular/pull/6623/files doit atterrir en premier.

Il y a toujours un problème ouvert https://github.com/angular/angular/issues/7595 Cela empêche pattern d'être lié à. Le modèle doit être ajouté statiquement au DOM (sans liaison) pour fonctionner.

8
Günter Zöchbauer

Je mets plus de détails (Angular 2.0.8 - 3 mars 2016): https://github.com/angular/angular/commit/38cb526

Exemple de repo:

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

Je l'ai testé et cela a fonctionné :) - 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'>

MISE À JOUR septembre 2017

Je veux juste dire qu'actuellement, quand j'ai plus d'expérience, j'utilise généralement l'approche "bon marché" de la validation des données:

La validation est UNIQUEMENT côté serveur (pas dans angular du tout!) Et si quelque chose ne va pas, le serveur (API Restful) renvoie un code d'erreur, par exemple HTTP 4 et suivants objet json dans le corps de la réponse (que dans angular 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, vous pouvez généralement le mapper facilement à la structure ci-dessus)

Dans le modèle html, j'utilise une balise 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 de "capacité", le tag avec la traduction d'erreur (dans la langue de l'utilisateur) sera visible. Cette approche présente les avantages suivants:

  • c'est très simple
  • dans angular nous ne doublons pas le code de validation qui est (et doit être) dans le serveur (en cas de validation regexp cela peut soit empêcher soit compliquer ReDoS attaques)
  • nous avons un contrôle total sur la façon dont l'erreur sera montrée à l'utilisateur (ici comme exemple par exemple dans la balise <small>)
  • car dans la réponse du serveur, nous renvoyons nom_erreur (au lieu d'un message d'erreur direct), nous pouvons facilement changer le message d'erreur (ou le traduire) en modifiant uniquement frontend-angular code (ou fichiers avec traductions). Donc, dans ce cas, nous n'avons pas besoin de toucher le code backend/serveur.

Bien sûr, parfois (si cela est nécessaire - par exemple, le champ retypePassword qui n'est jamais envoyé au serveur), je fais des exceptions de l'approche ci-dessus et j'effectue une validation dans angular (mais utilisez un "this.err "mécanisme pour afficher les erreurs (donc je n'utilise pas l'attribut pattern directement dans la balise input mais je fais plutôt une validation regexp dans une méthode de composant après que l'utilisateur a déclenché l'événement approprié comme input-change ou save) .

7
Kamil Kiełczewski