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.

Solution 1

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

Solution 2

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.

Solution 3

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

you can use type number and max

Solution 4

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>

View more solutions