web-dev-qa-db-de.com

Begrenzen Sie die Länge einer Schnur mit Winkel 2/Ionisch 2

Wie beschränke ich das Telefonnummernfeld auf 10 Zeichen? Verwenden Sie "angle2 .". Ich habe versucht, ng-maxlenth zu verwenden, aber es funktioniert nur im Browser, aber nicht in den Android-Geräten.

Ich habe ein Code-Snippet mit Winkel 1 gefunden. Aber wie schreibe ich den gleichen Code mit Winkel2 neu?

app.directive("limitTo", [function() {
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
            var limit = parseInt(attrs.limitTo);
            angular.element(elem).on("keypress", function(e) {
                if (this.value.length == limit) e.preventDefault();
            });
        }
    }
}]);

<input limit-to="4" type="number" class="form-control input-lg" ng-model="search.main" placeholder="enter first 4 digits: 09XX">
angulartypescriptionic-frameworkionic2ionic3
5
vishnu

In Angle2 wird es so aussehen:

@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();
  }
}

Vergessen Sie nicht, die Direktive in NgModule sth zu registrieren:

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, LimitToDirective ],
  bootstrap: [ App ]
})
export class AppModule {}

Und dann verwenden Sie es wie:

<input limit-to="4" type="number" placeholder="enter first 4 digits: 09XX">

Hier ist der Plunker!

9
yurzui

Anstelle einer benutzerdefinierten Direktive können Sie einfach das maxlength-HTML-Attribut und die attr-Bindung aus Angular 2 wie folgt verwenden: [attr.maxlength]="4" 

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

Sie können dieses Attribut auch von Ihrer Komponente aus an eine Eigenschaft binden, um die maximale Länge dynamisch festzulegen. Bitte werfen Sie einen Blick auf diesen Plunker.

9
sebaferreras

Verwenden Sie einfach Slice:

{{expression | slice:begin:end}}

Angular DOCS: https://angular.io/docs/ts/latest/cookbook/ajs-quick-reference.html

7
Felipe Sabino

Die @yurzui-Lösung funktionierte auf Android-Geräten nicht. Das Keypress-Ereignis wird aus bestimmten Gründen nicht ausgelöst, wie von @Jagadeesh erwähnt. Es gibt auch Probleme beim Aktualisieren gebundener Daten durch ngModel.

Ich empfehle stattdessen diese Lösung:

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

Überprüfen Sie beim Eingabeereignis die Länge des aktuellen Eingabewertes. Wenn er den Grenzwert überschritten hat, ersetzen Sie ihn durch den zuletzt gespeicherten alten Wert und aktualisieren Sie dann den angezeigten Textwert der Eingabe. und lösen Sie ein neues ngModelChange -Ereignis aus, um die gebundene Eigenschaft zu aktualisieren.

1
iouhammi

Ich habe ein ähnliches Problem in ionic2/angle2 auf Samsung Android-Geräten gesehen. Ich habe die benutzerdefinierte Direktive geschrieben, um dies zu behandeln. Dasselbe wurde in meinem Blog erwähnt und die dort genannten Verwendungshinweise . http://jagadeeshmanne.blogspot.in/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)
    }
  }
}

1
Jagadeesh

basierend auf @yurzui eckig 4/5 umfassendere Lösung min, max. Attribute + Bugfix zum Löschen

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));
    }
}
0
altoqueperro