ngModelChange 与输入长度

Question

我想对输入字段中的整数数量设置一个限制，就像类型为文本时的 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 时如何防止事件按键。

谢谢， 阿什利

Answer 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

根据其是否有效，将评估为 true 或 false。

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

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;
    }
  }
}

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