Ionic input (number) set maximum length

Ionic Framework ionic-v3
21

I found my way out you can use below my code. great this about it is you can keep input type number so android will show keyboard of your desire

put this code in your form builder

phone: ['', [Validators.required, this.isValidNumber.bind(this)]]

in your ts file add below method

isValidNumber(fieldControl: FormControl) {
    if(this.formBuilderGroup) {
      return fieldControl.value.toString().length < 10 ? null : {
        NotEqual: true
      };
    }
  }

in above code change formBuilderGroup to whatever your form builder group name it is. change 10 to whatever you prefer length

1 Like
23

Thanks you save my time :slight_smile:

24

I solved with a directive:

import {
    Directive,
    ElementRef,
    HostListener,
    Input
} from "@angular/core";


@Directive({
    selector: "[numeric]"
})
export class NumericDirective {

    @Input('integers') 
    integers: number = 5;
    
    @Input('decimalSeparator') 
    decimalSeparator = '.';
    
    @Input('decimals') 
    decimals: number = 0;    
    
    @Input('enableMinusPlusOperator') 
    enableMinusPlusOperator = false;
    
    private invalidEndChars = ['+', '-', this.decimalSeparator];

    private check(value: any): boolean {   
        let regExp;     
        if (this.decimals == 0) {
            if (this.enableMinusPlusOperator) {
                regExp = '^(([+-])|([+-]{0,1}[0-9]{1,' + this.integers + '}))$';
            } else {
                regExp = '^[0-9]{1,' + this.integers + '}$'; 
            }            
        } else {            
            if (this.enableMinusPlusOperator) {
                regExp = '^(([+-])|([+-]{0,1}[0-9]{1,' + this.integers + '}(\\' + this.decimalSeparator + '[0-9]{0,' + this.decimals + '}){0,1}))$';
            } else {
                regExp = '^([0-9]{1,' + this.integers + '}(\\' + this.decimalSeparator + '[0-9]{0,' + this.decimals + '}){0,1})$';
            }                        
        }        
        return String(value).match(new RegExp(regExp)) != undefined;
    }

    private lastCheck() {
        setTimeout(() => {   
            let currentValue = String(this.el.nativeElement.value);
            this.invalidEndChars.forEach(invalidChar => {
                if (currentValue.endsWith(invalidChar)) {                
                    this.el.nativeElement.value = currentValue.replace(invalidChar, '');
                }   
            });                     
        });
    }

    private run(oldValue) {
        setTimeout(() => {    
            let currentValue: string = this.el.nativeElement.value;
            if (currentValue !== '' && !this.check(currentValue)) {                
                this.el.nativeElement.value = oldValue;
            }            
        });
    }

    constructor(private el: ElementRef) {}

    @HostListener('keydown', ['$event'])
    onKeyDown(event: KeyboardEvent) {
        this.run(this.el.nativeElement.value);
    }

    @HostListener('paste', ['$event'])
    onPaste(event: ClipboardEvent) {
        this.run(this.el.nativeElement.value);
    }

    @HostListener('focusout')
    onBlur() {
        this.lastCheck();
    }

}

example:

<ion-input formControlName="qtdApreendida" type="text" numeric [decimals]="isCargaAnimal() ? 0 : 3" integers="5" decimalSeparator=","></ion-input>