使用 angular 2/ionic 2 限制字符串的长度

Posted

技术标签:

【中文标题】使用 angular 2/ionic 2 限制字符串的长度【英文标题】:Limit the length of a string using angular 2/ionic 2 【发布时间】:2017-01-14 15:53:05 【问题描述】:

如何使用 angular2 将电话号码字段限制为 10 个字符。 我尝试使用 ng-maxlenth,但它只能在浏览器中工作,而不能在 android 设备中工作。

我找到了一个使用 angular 1 的代码 sn-p。但是我如何使用 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">

【问题讨论】:

【参考方案1】:

您可以使用 maxlength html 属性和来自 Angular 2 的 attr 绑定,而不是使用自定义指令,如下所示:[attr.maxlength]="4"

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

您还可以将该属性绑定到组件中的属性以动态设置最大长度。

【讨论】:

这是更清晰的答案 imo 这个笨蛋在哪里? 我已经更新了 plunker @Ortiz,现在它又可以工作了 :) 谢谢,我会在我的项目中尝试一下,如果有效,请告诉您。 对于反应式表单来说,将验证器与输入限制分开也是一个很好的解决方案。通过这种方式,您可以在没有自定义指令的情况下使用此属性的输入限制,同时您可以在 ..component.ts 中为适当的 formControl 添加单独的验证器:myInput: new FormControl(null, [ Validators.maxLength(4)])【参考方案2】:

在 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

【讨论】:

【参考方案3】:

只需使用切片:

expression | slice:begin:end

角度文档: https://angular.io/docs/ts/latest/cookbook/ajs-quick-reference.html

【讨论】:

这样效果最好,而且非常简单,只需添加省略号的条件和... p.name.length >= 40 ? (p.name | slice:0:40)+'...' : p.name 这非常适合我的用例。谢谢+1 :)【参考方案4】:

我在三星 android 设备上的 ionic2/angular2 中遇到过类似的问题。 我已经编写了自定义指令来处理这个问题。 我的博客中也提到过,以及其中提到的使用说明。 http://jagadeeshmanne.blogspot.com/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)
    
  

【讨论】:

【参考方案5】:

@yurzui 解决方案不适用于安卓设备。正如@Jagadeesh 所提到的,由于某些原因,keypress 事件不会触发。 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 事件来更新绑定的属性。

【讨论】:

【参考方案6】:

基于@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));
    

【讨论】:

以上是关于使用 angular 2/ionic 2 限制字符串的长度的主要内容,如果未能解决你的问题,请参考以下文章

Angular 2/Ionic 2 应用程序中的手写/绘图?

在 Angular 2、Ionic 2 中返回一个承诺值

在父 html 中单击时,在 Angular 2/Ionic 中调用子方法

Angular 2 Ionic 2 - 如何将最大或最小日期设置为今天以进行日期输入?

如何使用 Angular 2 / Typescript 限制输入字段中的特殊字符

限制字符并在 Angular js 和 ionic 之后有三个点