【问题标题】:ngModelChange with input lengthngModelChange 与输入长度
【发布时间】:2017-04-05 17:30:05
【问题描述】:

我想对输入字段中的整数数量设置一个限制,就像类型为文本时的 maxlength 一样。下面是我模板中的代码。

  <ion-input 
      type="number" 
      placeholder="Username (required)" 
      [ngModel]="test"
      (ngModelChange)="getLength($event)"
      name="test"> 
  </ion-input>

在 .ts 中,

  getLength(data){
    if(data.length > 8){
      console.log(1);
      let data1 = data.substring(0,8);
      this.test = data1; 
      return false;
    }
  }

知道当长度大于 8 时如何防止事件按键。

谢谢, 阿什利

【问题讨论】:

  • 为什么不使用 maxlength 属性本身..
  • 您好,类型号的最大长度不存在。

标签: angular ionic2 angular2-template


【解决方案1】:

使用FormBuilder 进行更复杂的验证,会为您节省大量时间和精力。

import {FormBuilder, FormGroup} from '@angular/forms';

constructor(private fb: FormBuilder) {}

public myForm: FormGroup = this.fb.group({
  username: ['', [Validators.required, Validators.maxLength(8)]]
});

然后像这样使用它:

<!-- Swap div for whatever your parent container is -->
<div>
  <ion-input type="number" formControlName="username">
</div>

然后您只需检查表单的有效性:

this.myForm.valid

根据其是否有效,将评估为 truefalse

编辑:要添加到我上面的答案,您可以使用管道:

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
  name: 'maxLength'
})

export class MaxLength implements PipeTransform {

  transform(value: string): string {

    if (value) {
      return value.length > 8 ? value.splice(0, 8) : value;
    }
  }
}

我尚未对此进行测试,因此您可能需要对其进行调整才能使其正常工作。但它应该给你一个粗略的想法。

【讨论】:

  • 您好,它只会报错,但不会阻止用户输入更多数字。
  • @ashley 您可以编写自己的管道,禁止输入更多数字。
  • 你有这方面的例子吗?我知道角管道主要用于转换文本。
  • @ashley 更新了答案。
  • @ashley 如果此解决方案适合您,请不要忘记将答案标记为已接受。我注意到您有很多问题没有公认的答案。将它们标记为已接受总是好的,这样当它们实际上已解决时,它们就不会显得未解决。 :)
猜你喜欢
  • 2017-12-04
  • 1970-01-01
  • 2022-09-26
  • 2021-08-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多