web-dev-qa-db-fra.com

Angular 2: validation d'entrée simple

J'ai une entrée simple qui est destinée à un numéro de téléphone et je voudrais valider qu'il n'y a que des chiffres et que la longueur est de 10 chiffres.

<input [(ngModel)]="client.phone" class="form-input" name="phone" type="phone" [value]="client.phone">

Que puis-je faire pour valider ceci sans utiliser FormBuilder? Il semble que FormBuilder complique simplement les choses et je voudrais juste valider cette entrée.

javascriptvalidationangularangular2-forms
5
Jeremy Thomas

Avec le validateur de motifs intégré, il est très facile:

<input [(ngModel)]="client.phone" pattern="[0-9]{10}" class="form-input" name="phone" type="phone" [value]="client.phone">
5
unitario

<input type="number" name="phone" max="10">

vous pouvez utiliser le numéro de type et max

2
samnu pel

Voici un exemple tiré de mon cours Pluralsight. Ce premier exemple utilise des formulaires basés sur des modèles. Il utilise un modèle simple pour valider l'adresse e-mail:

            <div class="form-group"
                [ngClass]="{'has-error': (emailVar.touched || emailVar.dirty) && !emailVar.valid }">
                <label class="col-md-2 control-label" 
                    for="emailId">Email</label>

                <div class="col-md-8">
                    <input class="form-control" 
                           id="emailId" 
                           type="email" 
                           placeholder="Email (required)" 
                           required
                           pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+"
                           [(ngModel)]="customer.email"
                           name="email"
                           #emailVar="ngModel" />
                    <span class="help-block" *ngIf="(emailVar.touched || emailVar.dirty) && emailVar.errors">
                        <span *ngIf="emailVar.errors.required">
                            Please enter your email address.
                        </span>
                        <span *ngIf="emailVar.errors.pattern">
                            Please enter a valid email address.
                        </span>

                        <!-- This one does not work -->
                        <span *ngIf="emailVar.errors.email">
                            Please enter a valid email address.
                        </span>
                    </span>
                </div>
            </div>

Cet exemple utilise des formes réactives pour la même chose.

    this.customerForm = this.fb.group({
        firstName: ['', [Validators.required, Validators.minLength(3)]],
        lastName: ['', [Validators.required, Validators.maxLength(50)]],
        email: ['', [Validators.required, Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+')]],
        sendCatalog: true
    });

Donc, utiliser un motif est vraiment une technique Angular. Je vous indiquais simplement le site HTML car il contenait plusieurs suggestions de modèles de numéros de téléphone parmi lesquels vous pourriez choisir et que vous pourriez utiliser à la place des modèles de courrier électronique illustrés dans mes exemples ici.

Faites-moi savoir si vous voulez le lien vers le code github associé.

1
DeborahK

https://angular.io/docs/ts/latest/guide/forms.html 

<form role="form" #f="ngForm" novalidate>
    <input class="form-input" type="number" [(ngModel)]="client.phone" name="phone" max="10">
    <button type="submit" [disabled]="f.form.invalid">
</form>
1
Dmitrij Kuba