Japanese characters are not bound to angular formControl

April 17, 2024

Create simple angular project with input control
Typed Japanese characters are not bound to input control

<input type="text" [(ngModel)]="title" (input)="articleNameEntered()"/>

 title = '';
  articleNameEntered() {
    console.log('title', this.title);
  }

**# **expected result ****
japnese character should print in console

try following approach

use keyup event for hostlistner

still getting english character in event properties

>Solution :

This could be due to the way input events are handled with Japanese Input Method Editors (IMEs). You could use event to get the latest updated value of title.

<input type="text" (input)="onInputChange($event)">

onInputChange(event: Event): void {
   const inputElement = event.target as HTMLInputElement;
   const inputValue = inputElement.value;
   console.log(inputValue);
}

BTW, the general way to watch a model change should be like this sample:

HTML:

<input type="text" [(ngModel)]="title" (input)="articleNameEntered($event)" />

TS:

  private _title: string = '';

  get title(): string {
    return this._title;
  }

  set title(value: string) {
    this._title = value;
    console.log('set title updated:', value);
  }