Angular Input numeric validation | Typescript

numeric in form are basic level of validation in Angular application. Input form type=text/number only allows numeric fields and other alphabets and special characters are not allowed. In Html numbers are entered via input form with input type=text in HTML4 or less, type=number in HTML5 language

In this Angular tutorial, I am going to explains about input type numeric validation with different ways.

Angular offer multiple below ways to handle numeric form validation.

• Accept numbers only with Angular forms.
• HTML5 forms

Other versions available:

• ReactJS Input type number validation
• Allow numbers only in Vuejs

Url pattern validation can be implement with multiple approaches

This tutorials works all angular versions 2,5,6 8,9,10,11

Let’s get started.

Angular input number validation

Angular offers form handling with two ways. Reactive Forms are used to handle form input controls with model drive approach to maintain the state between form handling Template forms works with two way binding between model and control to maintain the form state.

Let’s see an examples in both ways to handle numeric validations while focus lost (onBlur) on input form.

Reactive form with onBlur event

First, Import ReactiveFormsModule in app.module.ts file to enable Reactive form handling. app.module.ts:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";

import { AppComponent } from "./app.component";

@NgModule({
  imports: [BrowserModule, FormsModule, ReactiveFormsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Next, Create an Angular component, Let’s name it as Input-number-reactive component.

It creates three files in input-number-reactive folder of application/src folder.

input-number-reactive.component.html
input-number-reactive.component.ts
input-number-reactive.component.css

In Html template component: input-number-reactive.component.html

• Add html form with formGroup directive, named this as yearForm
• In the form, Declare input form by adding formControlName with it’s value as year
• validation errors state is maintained in yearForm, so display the validation errors as seen below
• yearForm.controls[‘year’].valid returns true if no validation errors, else false
• yearForm.controls[‘year’].touched returns true if already user entered the values
• validation logic is added to display or hide the errors

Html Template component code:

<div>
  <h2>{{ heading | titlecase }}</h2>
  <form [formGroup]="yearForm">
    <input type="text" formControlName="year" />
    <div
      *ngIf="!yearForm.controls['year'].valid && yearForm.controls['year'].touched"
    >
      <div
        *ngIf="yearForm.controls['year'].errors.required"
        style="background-color: red"
      >
        Year is required
      </div>
      <div
        *ngIf="yearForm.controls['year'].errors.pattern"
        style="background-color: red"
      >
        Only Numbers are allowed
      </div>
    </div>
  </form>

  <button type="submit ">Submit</button>
</div>

In component typescript code,

• declared variable yearForm of type FormGroup ,which should have binding to form element in html template
• Defined the variable for regular expression for numeric only.
• In the constructor, Initialize formGroup with FormControl object
• FormControl object accepts first parameter as initial value empty
• Second parameters object with validators - Required and Regular expression pattern
• Validators.required returns true if form control is empty -Regular expression is passed to Validators.pattern method to enable numeric validation
• updateOn tells how the model changes its behaviour, in this case onBlur event -Validators are executed on input focus lost

Typescript component code:

import { Component, OnInit } from "@angular/core";
import { FormControl, FormGroup, Validators } from "@angular/forms";

@Component({
  selector: "app-input-number-reactive",
  templateUrl: "./input-number-reactive.component.html",
  styleUrls: ["./input-number-reactive.component.css"]
})
export class InputNumberReactiveComponent {
  heading = "angular Input Numeric examples";
  yearForm: FormGroup;

  myusername: string = "";
  numberRegEx = /\-?\d*\.?\d{1,2}/;

  constructor() {
    this.yearForm = new FormGroup({
      year: new FormControl("", {
        validators: [Validators.required, Validators.pattern(this.numberRegEx)],
        updateOn: "blur"
      })
    });
  }
  submit() {
    console.log(this.yearForm.value);
  }
}

Output:

Template driven forms

It has an support for input type=number in latest modern browsers. HTML5 has an support for input type=number combined with regular expression pattern.

In Component html template code,

• Input is defined with type=number for text box.Even though it specified the number, You have to add validation to make it work
• For validation to work, pattern attribute is added for numbers only
• NgModel directive added to to have binding from controller to html and vice versa, that tells any value change UI propagates to Model object and also applies to changes in model to UI
• And also local reference is declared #yearerror with value ngModel which holds state of input controls ngModelOptions directive tells to model to change its value on updateOn event configured. that means, validation executed on blur event

<div>
	<input type="text" name="year" id="year" placeholder="enter year" [(ngModel)]="year" [ngModelOptions]="{ updateOn: 'blur' }" #yearerror="ngModel" pattern="/\-?\d*\.?\d{1,2}/"
        required />
	<div *ngIf="yearerror.invalid && (yearerror.dirty || yearerror.touched)">
		<div *ngIf="yearerror.errors.required">
			<span style="background-color: red">Year is required </span>
		</div>
		<div *ngIf="yearerror.errors.pattern">
			<span style="background-color: red">Only Numbers allowed </span>
		</div>
	</div>
</div>

Typescript component code:

In the component, if two way binding is defined in html code, then variable is declared with default value.

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-input-number-template",
  templateUrl: "./input-number-template.component.html",
  styleUrls: ["./input-number-template.component.css"]
})
export class InputNumberTemplateComponent  {
  constructor() {}
  year: number;
}

Typescript url regexp validation

Sometimes, We want to do validation typescript file.

• It uses same above regular expression pattern for url validation
• RegExp object is created with regex
• pattern.test checked against supplied url and return true-valid

  public isValidUrl(urlString: string): boolean {
    try {
      let pattern = new RegExp(this.urlRegEx);
      let valid = pattern.test(urlString);
      return valid;
    } catch (TypeError) {
      return false;
    }
  }
}
}
console.log(this.isValidUrl('https://www.google.com')); // true
console.log(this.isValidUrl('google')); // false

Angular input type number allow numbers only

HTML5 provides input type=number in web pages. This example tells to accept numbers only with allowing alphabets.

This will be achieved with keypress event which is called when ever key is pressed in keyboard

The call back handler get char code and checks this code against regular numeric expression. if entered key is number, allowed, else not allowed.

In html template,

	<input type="number" (keypress)="onKeyPress($event)">

Typescript code:

onKeyPress(event: any) {
    const regexpNumber = /[0-9\+\-\ ]/;
    let inputCharacter = String.fromCharCode(event.charCode);
    if (event.keyCode != 8 && !regexpNumber.test(inputCharacter)) {
      event.preventDefault();
    }
  }

Conclusion

On this post, You learned

• Angular number validation using regular expression example with reactive forms
• HTML 5 input type number template form validation
• only numbers allowed in input number