Can't apply limit on the input field of type=number

Question

Below is my input field of type="number". I have applied the min and the max attributes to restrict the user to enter the value of the field. The problem is this given validation is still allowing the user beyond the limit while he types the numerical value. Please tell me how can I stop him/her entering the value above the limit.

 <input name="capacity" [(ngModel)]="nService.capacity" type="number" 
class="input-minimal" min="1" max="9999" placeholder="Capacity" required>

It usually wont stop. But angular validation will throw error. You can prevent user from proceeding further with validation or still if you want to limit the number of characters you need a custom directive — Prabhakaran, Sep 07 '17 at 05:53
This problem is similar to https://stackoverflow.com/questions/32936352/html-number-input-min-and-max-not-working-properly — Vaibhav N Naik, Sep 07 '17 at 06:09

Vega · Accepted Answer · 2017-09-07T15:22:15.463

Setting attributes max and min on an input with type = "number" will prevent the user from incrementing/decrementing the value with the spinner. But it will not prevent the keyboard input. To do so, you would have to write a custom validator.

In my example I binded to the keyup event with an optional error validation block, just in case you prefer to leave the user to correct herself.

Plunker

HTML:

 <input autofocus id="myModel" (keyup)="preventInput($event)" 
       name="myModel" 
        #myModel="ngModel"  style="width:60px"  
        [(ngModel)]="capacity" type="number" 
       class="input-minimal" min="1" max="99" 
       placeholder="Capacity" required>

Typescript:

 preventInput(event){
    let value=this.capacity;
    if (value >= 100){
      event.preventDefault()
      this.capacity = parseInt(value.toString().substring(0,2));
    }
  }

P.S. for the validation part I used the solution from here

score 1 · Answer 2 · answered Sep 07 '17 at 07:07

You have to check the validity before sending it.

Here is how, with Reactive Forms :

HTML

<form novalidate (onSubmit)="submitForm()" [formGroup]="myForm">
    <input type="number" formControlName="myNumber">
    <button type="submit">Send</button>
</form>

TS

import {FormBuilder, FormGroup, Validators} from '@angular/forms';


myForm: FormGroup;
constructor(prviate fb: FormBuilder) {
    this.myForm = fb.group({
        myNumber: [0, [Validators.max(9999), Validators.min(1)]]
    });
}

submitForm() {
    let value = this.myForm.value;
    if (this.myForm.valid) {
        // Here, do your stuff when the form is valid
    }
}

score 0 · Answer 3 · answered Sep 07 '17 at 05:58

This is code for custom directive which I restricted as attribute:

AngularJs Custom Directive for max length:

app.directive('inputMaxlength', function() {
  return {
    require: 'ngModel',
    link: function (scope, element, attrs, ngModelCtrl) {
      var maxlength = Number(attrs.inputMaxlength);
      function fromUser(text) {
          if (text.length > maxlength) {
            var transformedInput = text.substring(0, maxlength);
            ngModelCtrl.$setViewValue(transformedInput);
            ngModelCtrl.$render();
            return transformedInput;
          } 
          return text;
      }
      ngModelCtrl.$parsers.push(fromUser);
    }
  }; 
})

Use this custom directive in HTML like

<input type="text" input-maxlength=20 ......>

And for angular form validation lots of samples are there.

Sry my bad. We can use keyup event to restrict characters in angular 2 @YashwardhanPauranik — Prabhakaran, Sep 07 '17 at 06:12

Can't apply limit on the input field of type=number

3 Answers3