CODEWITHSUNDEEP
javascriptvalidationangularangular2-forms
Jeremy Thomas
Jeremy Thomas

Reputation: 6684

Angular 2: Simple input validation

I have a simple input that is meant for a phone number and I'd like to validate that there are only numbers and that the length is 10 digits long.

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

What can I do to validate this without using FormBuilder? It seems like FormBuilder just complicates things and I'd just like to validate this one input.

Upvotes: 6

Views: 13797

Answers (4)

unitario
unitario

Reputation: 6535

With the built in pattern validator it is very easy:

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

Upvotes: 6

Dmitrij Kuba
Dmitrij Kuba

Reputation: 1038

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>

Upvotes: 1

DeborahK
DeborahK

Reputation: 60528

Here is an example from my Pluralsight course. This first example is using Template-driven forms. It is using a simple pattern to validate the email address:

            <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>

This example uses Reactive Forms for the same thing.

    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
    });

So using a pattern is very much an Angular technique. I was just pointing you to the HTML site because it provided several suggestions for phone number patterns that you could pick from and use in place of the email patterns shown in my examples here.

Let me know if you want the link to the associated github code.

Upvotes: 3

samnu pel
samnu pel

Reputation: 914

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

you can use type number and max

Upvotes: 2

Related Questions