使用 angular2 限制输入字段的长度答案

【问题标题】：Limit the length of input field using angular2使用 angular2 限制输入字段的长度
【发布时间】：2017-03-10 03:40:40
【问题描述】：

我已经实现了使用 angular2 限制输入字段的指令。它在桌面浏览器中运行良好，但在 android 移动端无法运行。

组件

import { LimitToDirective } from '../../../directives/limitedvalidation';
@Component({
  templateUrl: 'build/pages/profile/change-basic-details/change-basic-details.html',
  directives: [LimitToDirective]  
})
export class UpdateBasicDetailsPage {
  constructor(){}
}

指令

 import {Directive, Input} from '@angular/core'
    @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();
      }
    }

模板

<ion-input limit-to="12" type="tel" [formControl]="aadhaarno">

【问题讨论】：

标签： angular

【解决方案1】：

你应该使用 max-length html5 属性，然后对 Angular2 使用表单验证，不需要自定义指令。

【讨论】：

哦，这只是验证用户输入 - 它不限制用户在输入字段中输入超过 12 个符号。
我们不能去改变浏览器的最大长度限制吗，我想它不安全。我们还需要在 javascript 端进行一些验证

【解决方案2】：

使用 maxlength 如下：

<ion-input [maxlength]="12" type="tel" [formControl]="aadhaarno">

【讨论】：

我在 android mobile 中遇到错误，[INFO:CONSOLE(463)]“错误：未捕获（承诺中）：异常：构建/页面/配置文件/更改基本详细信息/更改中的错误-basic-details.html:63:8 ORIGINAL EXCEPTION: Invalid integer literal when parsing null in base 10
哦，这只是验证用户输入 - 它不限制用户在输入字段中输入超过 12 个符号。

【解决方案3】：

请参考

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


<ion-input limit-to="12" type="tel" [formControl]="aadhaarno">

click

【讨论】：