Question

我想设置输入字段中整数数量的限制，就像type为text时的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;
    }
  }
}

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

带输入长度的ngModelChange

1 个答案: