Limit the length of input field using angular2

Question

I have implemented the directive to restrict the input field using angular2. It is working fine in desktop browser, but not working in android mobile.

component

import { LimitToDirective } from '../../../directives/limitedvalidation';
@Component({
  templateUrl: 'build/pages/profile/change-basic-details/change-basic-details.html',
  directives: [LimitToDirective]  
})
export class UpdateBasicDetailsPage {
  constructor(){}
}

directive

 import {Directive, Input} from '@angular/core'
    @Directive({
      selector: '[limit-to]',
      host: {
        '(keypress)': '_onKeypress($event)',
      }
    })
    export class LimitToDirective {
      @Input('limit-to') limitTo; 
      _onKeypress(e) {
         const limit = +this.limitTo;
         if (e.target.value.length === limit) e.preventDefault();
      }
    }

template

<ion-input limit-to="12" type="tel" [formControl]="aadhaarno">

ranakrunal9 · Accepted Answer · 2016-10-27 12:52:49Z

8

Use maxlength as belows :

<ion-input [maxlength]="12" type="tel" [formControl]="aadhaarno">

answered Oct 27, 2016 at 12:52

ranakrunal9

13.6k3 gold badges44 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

vishnu Over a year ago

i am getting error in android mobile, [INFO:CONSOLE(463)] "Error: Uncaught (in promise): EXCEPTION: Error in build/pages/profile/change-basic-details/change-basic-details.html:63:8 ORIGINAL EXCEPTION: Invalid integer literal when parsing null in base 10

artuska Over a year ago

Oh 'cmon this only validates user input — it does not restrict user to enter more than 12 symbols in input field.

danday74 · Accepted Answer · 2016-10-27 12:51:02Z

3

you should use max-length html5 attribute and then use form validation for Angular2, no custom directive needed.

answered Oct 27, 2016 at 12:51

danday74

58.1k56 gold badges273 silver badges337 bronze badges

3 Comments

artuska Over a year ago

Oh 'cmon this only validates user input — it does not restrict user to enter more than 12 symbols in input field.

Nitin Shekhar Over a year ago

can't we go and change the maxlenght limit in browser , its not safe I suppose. We need to put some validation on javascript side as well

Fabien Haddadi Over a year ago

Attention, the HTML attribute is called maxlength, not max-length, and has existed long before HTML 5...

Paul Cheriyan · Accepted Answer · 2020-05-11 07:26:36Z

0

Please refer

import { Directive, Input, Output, EventEmitter } from '@angular/core';

@Directive({
 selector: '[limit-to]',
 host: {
'(input)': 'onInputChange($event)',
}
})
export class LimitToDirective {
 @Input('limit-to') limitTo;
 @Output() ngModelChange: EventEmitter<any> = new EventEmitter();
 oldValue: any;

 onInputChange(e) {
debugger
const limit = +this.limitTo;
if (e.target.value.length > limit) {
  e.target.value = this.oldValue;
}
this.oldValue = e.target.value;
this.ngModelChange.emit(e.target.value);
}
}


<ion-input limit-to="12" type="tel" [formControl]="aadhaarno">

click

answered May 11, 2020 at 7:26

Paul Cheriyan

65810 silver badges19 bronze badges

Collectives™ on Stack Overflow

Limit the length of input field using angular2

component

directive

template

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

component

directive

template

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related