Ограничьте длину струны, используя angular 2 / ionic 2

Решение @yurzui не работало на устройстве Android. событие нажатия клавиши не срабатывает по некоторым причинам, как упоминалось @Jagadeesh. Также есть проблемы с обновлением связанных данных с помощью ngModel.

Вместо этого я предлагаю это решение:

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){
    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);
  }
}

При событии ввода проверьте длину текущего входного значения, если оно превышает предел, замените его последним сохраненным oldValue, затем обновите отображаемое текстовое значение ввода. и запустить новое событие ngModelChange, чтобы обновить привязанное свойство.

Вместо использования настраиваемой директивы вы можете просто использовать атрибут HTML maxlength и привязку attr из Angular 2 следующим образом: [attr.maxlength]="4"

<ion-input type="text" [(ngModel)]="a.myInput" [attr.maxlength]="4"></ion-input>

Вы также можете привязать этот атрибут к свойству из вашего компонента, чтобы динамически установить максимальную длину. Взгляните на этот плункер .

Просто используйте срез:

{{expression | slice:begin:end}}

Угловые DOCS: https://angular.io/docs/ts/latest/cookbook /ajs-quick-reference.html

Я столкнулся с аналогичной проблемой в ionic2 / angular2 на устройствах Samsung Android. Я написал специальную директиву, чтобы справиться с этим. То же самое, что упоминалось в моем блоге, и инструкции по использованию, упомянутые в нем. http://jagadeeshmanne.blogspot.com/ 2017/08 / ionic-2-angular-maxlength-issue-in.html

import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core';
import { Platform } from "ionic-angular";
 
@Directive({
    selector: '[cMaxLength]'
})
export class MaxLengthDirective {
 
  @Input('cMaxLength') cMaxLength:any;
  @Output() ngModelChange:EventEmitter<any> = new EventEmitter();
 
  constructor(public platform: Platform) {
  }
 
  //keypress event doesn't work in ionic android. the keydown event will work but the value doesn't effect until this event has finished. hence using keyup event. 
  @HostListener('keyup',['$event']) onKeyup(event) {
    const element = event.target as HTMLInputElement;
    const limit = this.cMaxLength;
    if (this.platform.is('android')) {
      const value = element.value.substr(0, limit);
      if (value.length <= limit) {
        element.value = value;
      } else {
        element.value = value.substr(0, limit-1);
      }
      this.ngModelChange.emit(element.value);
    }
  }
 
  @HostListener('focus',['$event']) onFocus(event) {
    const element = event.target as HTMLInputElement;
    if (!this.platform.is('android')) {
      element.setAttribute('maxlength', this.cMaxLength)
    }
  }
}

На основе @yurzui angular 4/5 более полное решение min, max атрибуты + исправление ошибки для удаления

import {Directive, ElementRef, HostListener, Input, OnInit, Renderer} from '@angular/core';

@Directive({
  selector: '[appMaxDigits]'
})
export class MaxDigitsDirective implements OnInit {
    @Input('appMaxDigits') appMaxDigits;
    constructor(private renderer: Renderer, private el: ElementRef) {}
    @HostListener('keydown', ['$event']) onKeydown(e: any) {
        const limit = +this.appMaxDigits;
        if (e.keyCode > 47 && e.keyCode < 127) {
            if (e.target.value.length === limit) { e.preventDefault(); }
        }
    }
    ngOnInit() {
        this.renderer.setElementAttribute(this.el.nativeElement, 'min', '0');
        this.renderer.setElementAttribute(this.el.nativeElement, 'max', '9'.repeat(this.appMaxDigits));
    }
}