Почему я не могу ограничить длину значения ввода с помощью Angular NgModel? - PullRequest
Новая
       36

Почему я не могу ограничить длину значения ввода с помощью Angular NgModel?

2 голосов
/ 09 октября 2019

У меня есть поле ввода с двухсторонней привязкой, и я хочу изменить ввод данных пользователем в верхнем регистре и ограничить его 3 символами. Я делаю это в установщике переменной. Замена в верхнем регистре работает, если я пытаюсь сделать подстроку, она больше не обновляет значение поля, хотя свойство корректно обновляется.

Если я ввожу «abc», оно корректно заменяет его на «ABC», но как толькокогда я набираю более 3 символов, остальные символы не удаляются. Например, «abcde» отображает «ABCde» на входе. Пожалуйста, смотрите пример stackblitz: https://stackblitz.com/edit/angular-bpuh8a

<input type="text" id="airport" name="airport" [(ngModel)]="airport">

private _airport = '';
get airport(): string {
  return this._airport;
}
set airport(value: string) {
  this._airport = value.substring(0, 3).toUpperCase();
}

Я знаю, что могу ограничить длину поля, используя maxlength, и это работает, но я хочу понять, почему то, что я здесь делаю, не работает.

Я также пытался вызвать метод в ngModelChange, но результат тот же

Спасибо за вашу помощь.

1 Ответ

0 голосов
/ 09 октября 2019

Сначала вам нужно понять viewModel и модель.

Когда вы печатаете четвертый символ, модель по-прежнему имеет значение ABC, поэтому Angular не обновляет viewModel ( Исходный код ). ), но элемент ввода все равно будет реагировать на ваш ввод.

Решением этой проблемы является ручное управление значением элемента ввода. или установите maxLength. 

<label for="airport">Airport </label>
<input #input type="text" id="airport" name="airport" [ngModel]="airport" (ngModelChange)="onChange($event)">
{{ airport }}

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  @ViewChild('input', { static: false }) input: ElementRef<HTMLInputElement>;
  airport = '';

  onChange(value: string) {
     this.airport = value.substring(0, 3).toUpperCase();
     this.input.nativeElement.value = this.airport;
  }
}

https://stackblitz.com/edit/angular-nwwjs7?file=src/app/app.component.ts

...