ngModelChange с длиной ввода

Я хочу установить ограничение на количество целых чисел в поле ввода так же, как maxlength, когда тип текста. Ниже приведен код в моем шаблоне.

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

In .ts,

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

Любая идея, как предотвратить нажатие клавиши события, когда длина больше 8.

Спасибо, Эшли


angular ionic2 angular2-template
person ashley    schedule 05.04.2017    source источник
comment
почему бы не использовать сам атрибут maxlength ..   -  person Pankaj Parkar    schedule 05.04.2017
comment
Здравствуйте, maxlength не существует для номера типа.   -  person ashley    schedule 06.04.2017

Ответы (1)


arrow_upward
0
arrow_downward

Используйте 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 в зависимости от того, действителен он или нет.

EDIT: Чтобы добавить к моему ответу выше, вы можете использовать канал:

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

Я не проверял это, поэтому вам, возможно, придется настроить его, чтобы он работал правильно. Но это должно дать вам общее представление.

person Chrillewoodz    schedule 05.04.2017
comment
Здравствуйте, это просто выдаст ошибку, но это не помешает пользователям вводить больше номеров. - person ashley; 06.04.2017
comment
@ashley Вы можете написать свой собственный канал, который запрещает ввод большего количества чисел. - person Chrillewoodz; 06.04.2017
comment
У вас есть пример для этого? Я знаю, что угловые каналы используются в основном для преобразования текста. - person ashley; 06.04.2017
comment
@ashley Обновленный ответ. - person Chrillewoodz; 06.04.2017
comment
@ashley Не забудьте пометить ответ как принятый, если это решение работает для вас. Я заметил, что у вас довольно много вопросов без принятого ответа. Всегда хорошо помечать их как принятые, чтобы они не казались нерешенными, когда они на самом деле решены. :) - person Chrillewoodz; 10.04.2017
comment
проверить этот планк. plnkr.co/edit/06lmBTvTPOSAg3kXaBQO?p=preview Это не работает. Вы можете помочь? - person ashley; 11.04.2017