使用角度2 /離子限制字​​符串長度2

Question

如何使用角度2將電話號碼字段限制爲10個字符。 我試過使用ng-maxlenth但它只能在瀏覽器中使用，但不能在android設備上使用。

我找到了一個使用角度1的代碼片段。但是，我如何使用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"> 

Answer 1

在angular2它看起來像：

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

不要忘記NgModule某事像註冊指令：

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

，然後用它喜歡：

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

這是Plunker！

Answer 2

而不是使用自定義的指令，你可以只使用maxlength HTML屬性和ATTR從角2這樣的結合：[attr.maxlength]="4"

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

您也可以在屬性的屬性綁定從您的組件動態設置最大長度。請看看this plunker。

Answer 3

只需使用切片：

{{expression | slice:begin:end}} 

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

Answer 4

我曾經面臨類似的問題，在三星的Android設備ionic2/angular2。 我寫了自定義指令來處理這個。 在我的博客和使用說明中提到的相同。 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) 
 
    } 
 
    } 
 
}

Answer 5

@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事件來更新綁定的屬性。