Angular 2: Simple input validation

Question

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.

Are you still looking to stay with a template driven form? – Winnemucca Apr 18 '17 at 19:19 — Winnemucca, Apr 18 '17 at 19:19
It just seemed simpler and I'm new to Angular2 – Jeremy Thomas Apr 18 '17 at 19:24 — Jeremy Thomas, Apr 18 '17 at 19:24
I'm looking for the angular way of approaching this – Jeremy Thomas Apr 18 '17 at 19:27 — Jeremy Thomas, Apr 18 '17 at 19:27

score 6 · Answer 1 · answered Apr 18 '17 at 20:58

6

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

answered Apr 18 '17 at 20:58

unitario

6,295
4
30
43

score 3 · Answer 2 · answered Apr 18 '17 at 19:41

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.

samnu pel · Answer 3 · 2017-04-18T19:25:41.667

2

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

you can use type number and max

edited Apr 18 '17 at 19:25

answered Apr 18 '17 at 19:16

samnu pel

914
5
12

Won't that limit the number to be between 1 and 10? I think the OP wants between 1 and 10 digits. – DeborahK Apr 18 '17 at 19:20

score 1 · Answer 4 · answered Apr 18 '17 at 20:45

1

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>

answered Apr 18 '17 at 20:45

Dmitrij Kuba

998
9
14

Angular 2: Simple input validation

4 Answers4