5

angular2 を使用して電話番号フィールドを 10 文字に制限するにはどうすればよいですか。ng-maxlenthを使用してみましたが、ブラウザーでのみ機能し、Android デバイスでは機能しません。

angular 1 を使用したコード スニペットを 1 つ見つけました。

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

6 に答える 6

11

maxlengthカスタム ディレクティブを使用する代わりに、 HTML 属性と Angular 2 の attr バインディングを次のように使用できます。[attr.maxlength]="4"

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

その属性をコンポーネントのプロパティにバインドして、最大長を動的に設定することもできます。

于 2016-09-07T07:44:25.290 に答える
0

@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));
    }
}
于 2018-07-31T17:53:34.733 に答える