typescript - Begrens lengden på en streng ved hjelp av angular 2/ionic 2

Hvordan kan jeg begrense telefonnummerfeltet til 10 tegn ved å bruke Angular2. Jeg prøvde å bruke ng-maxlength, men det fungerer bare i nettleseren og ikke på Android-enheter.

Jeg fant en kodebit som bruker Angular 1. Men hvordan skriver jeg den samme koden på nytt ved å bruke Angular 2?

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">

Svar #1

I stedet for å bruke en egendefinert direktiv, kan du bare bruke maxlength-HTML-attributtet og attr-bindingen fra Angular 2 slik: [attr.maxlength]="4"

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

Du kan også binde den attributten til en egenskap fra komponenten din for å sette maks lengde dynamisk.

Svar #2

I Angular2 vil det se slik ut:

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

Ikke glem å registrere direktivet i NgModule noe slikt som:

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

Og bruk det deretter slik:

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

Her er Plunker!

Relaterte artikler