typescript - Varför kan jag inte begränsa längden på ett inputvärde med Angular NgModel?

Jag har ett inmatningsfält med tvåvägsbindning och jag vill ändra användarens inmatning till versaler och begränsa den till 3 tecken. Jag gör detta i settern för variabeln. Versalersättningen fungerar, men om jag försöker göra en substring uppdateras inte fältvärdet längre, även om egenskapen uppdateras korrekt.

Om jag skriver in "abc" ersätts det korrekt med "ABC", men så snart jag skriver mer än 3 tecken tas inte de andra tecknen bort. Till exempel visas "abcde" som "ABCde" i inmatningen. Se Stackblitz-exemplet: 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();
}

Jag vet att jag kan begränsa fältets längd med maxlength och det fungerar, men jag vill förstå varför det jag gör här inte fungerar.

Jag har försökt ringa en metod i ngModelChange också men resultatet är detsamma

Tack för din hjälp.

Svar #1

Först behöver du förstå viewModel och modellen.

När du skriver den fjärde tecknet är modellen fortfarande ABC, så Angular uppdaterar inte viewModel (källkod), men inmatningselementet kommer ändå att reagera på din skrivning.

Lösningen på detta problem är att manuellt kontrollera värdet på inmatningselementet, eller att sätta 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

Relaterade artiklar