Restricting user to enter a max 5 digit integer with max 2 decimals in angular 2 with ngModel

Question

I have a input text field which contains [(ngModel)] and my requirement is to allow user only enter max 5 digit number with upto 2 decimals.Creating a directive is a best solution but I am not aware of how to bring this functionality. Please help.

the requirement is - 99999.99 is correct 99.9 is also correct.

I used number pipe [ngModel]="cost |number:'1.0-2' but it is not working..

Answer 1

You can use the pattern attribute of the <input> to validate your entry. I added a pattern for what you asked, positive/negative, 0 to 5 digits, 0 to 2 decimals:

<input name="something" pattern="^[-+]?\d{0,5}(\.\d{0,2})?$">

Answer 2

You can implement this in two ways. Template driven forms and in Reactive forms. Please find the below example which give some idea about how validation works.

In the TS file: ( Template Driven Forms)

import { Component } from '@angular/core';

@Component({
  selector: 'sandboxngforms',
  template: `
    <h1>Hello World</h1>
    <!-- by default html5 has validation. if u add a directive called "novalidate" in form tag
    then we can build our customised template.
    create an id called f so that we can easily group-->

    <!--group the form by value id #f instead of submit> use ngSubmit so that u can use the values used in the form and call the function -->

    <form novalidate #f="ngForm" (ngSubmit)="onSubmit(f)">
      <div class="form-group">
        <label>Name</label>
        <input
          type="text"
          class="form-control"
          [(ngModel)]="user.name"
          name="name"
          #userName="ngModel"
          minlength="2"
          required>
        <!-- using the name input field #tagid (i.e userName) write the below if condition 
        touched is a special directive that allows u when u click on the field and click outside
        will produce error-->

        <div *ngIf="userName.errors?.required && userName.touched" class="alert alert-danger">Name is required</div>
        <div *ngIf="userName.errors?.minlength && userName.touched"
             class="alert alert-danger">Name should be at least 2 characters
        </div>
      </div>
      <div class="form-group">
        <label>Email</label>
        <input
          type="text"
          class="form-control"
          [(ngModel)]="user.email"
          name="email"
          #userEmail="ngModel"
          required
        >
        <div *ngIf="userEmail.errors?.required && userEmail.touched" class="alert alert-danger">Email is required</div>
      </div>
      <div class="form-group">
        <label>Phone</label>
        <input
          type="text"
          class="form-control"
          [(ngModel)]="user.phone"
          name="phone"
          #userPhone="ngModel"
          minlength="10"
        >
        <div *ngIf="userPhone.errors?.minlength && userPhone.touched" class="alert alert-danger">Enter a valid phone
          number
        </div>
      </div>
      <input type="submit" class="btn btn-success" value="Submit">
    </form>
  `
})
export class SandboxngformsComponent {
// create an user object
  user = {
    name: '',
    email: '',
    phone: ''
  }

  onSubmit({value, valid}) {
    if (valid) {
      console.log(value);
    } else {
      console.log('Form is invalid');
    }
  }
}

Hope it helps