web-dev-qa-db-fra.com

Limiter la longueur d'une corde en utilisant angular 2/ionic 2

Comment puis-je limiter le champ de numéro de téléphone à 10 caractères en utilisant angular2 . J'ai essayé d'utiliser ng-maxlenth mais cela ne fonctionne que dans un navigateur, mais pas dans les appareils Android.

J'ai trouvé un extrait de code en utilisant angular 1. Mais comment puis-je réécrire le même code en utilisant angular2?

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

Dans angular2 cela ressemblera à:

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

N'oubliez pas d'enregistrer la directive dans NgModulehh comme:

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

Et puis l'utiliser comme:

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

Voici le Plunker!

9
yurzui

Au lieu d'utiliser une directive personnalisée, vous pouvez simplement utiliser l'attribut HTML maxlength et la liaison attr de Angular 2 comme ceci: [attr.maxlength]="4" 

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

Vous pouvez également lier cet attribut à une propriété de votre composant pour définir la longueur maximale de manière dynamique. S'il vous plaît jeter un oeil à ce plunker.

9
sebaferreras

Il suffit d'utiliser slice:

{{expression | slice:begin:end}}

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

7
Felipe Sabino

La solution @yurzui ne fonctionnait pas sur un appareil Android. l'événement de frappe ne se déclenche pas pour certaines raisons, comme mentionné par @Jagadeesh. Il existe également des problèmes de mise à jour des données liées par ngModel.

Je suggère cette solution à la place:

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

sur événement d'entrée, vérifiez la longueur de la valeur d'entrée actuelle; si elle dépasse la limite, remplacez-la par la dernière valeur stockée précédente, puis mettez à jour la valeur de texte affichée de l'entrée. et déclenchez un nouvel événement ngModelChange pour mettre à jour la propriété liée.

1
iouhammi

J'ai fait face au problème similaire dans ionic2/angular2 sur les appareils Android Samsung. J'ai écrit la directive personnalisée pour gérer cela. Idem mentionné dans mon blog et instructions d’utilisation mentionnées dans ce . 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

basé sur @yurzui angular 4/5 solution plus complète min, attributs max + correction de bogue pour la suppression

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