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

Answer 1

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

Answer 2

Use maxlength as belows :

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

Answer 3

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