[Angular] input 한글 입력시 짤림 현상

 

⚠️ Problem

검색 컴포넌트를 개발하던 중, 검색 input에 한글을 입력했을 때 검색 결과가 조금 이상하다는 것을 발견하게 되었다.

영어를 입력했을 땐 정상적으로 검색되지만, 한글을 입력할 땐 마지막에 입력한 한글이 짤린채로 검색 method를 호출하고 있었다.

 

영어 입력시

 

한글 입력시

-> '가나'를 입력했지만, 실제 input text에는 '가'만 나옴. 스페이스바나 방향키를 눌러야 '가나'로 인식함.

 

 

 

 

 

 

✅ Solution

구글링한 결과, 한 블로그에서 해결방법을 찾게 되었다.

한글과 같은 조합형 문자의 경우, 일반적으로 글자 입력 후 space나 enter 등을 통하여 문자 입력을 완료한 시점에 compositioned 라는 이벤트가 발생한다. 
이 이벤트에 따라 Angular는 양방향 바인딩을 처리한다.
작성중인 문자를 모두 바인딩하기 위해서는 Angular에서 제공되는 COMPOSITION_BUFFER_MODE를 변경해야 한다.

 

 

 

app.module.ts 파일에 아래와 같이 추가한다.

// 1. 'COMPOSITION_BUFFER_MODE' import
import { COMPOSITION_BUFFER_MODE } from '@angular/forms';


@NgModule({
	declarations: [AppComponent, ... ],
	imports: [
		BrowserModule,
		ReactiveFormsModule,
		FormsModule,
		...
	],
	providers: [
		{
			provide: ErrorHandler,
			useClass: ErrorService,
		},
        // 2. value provider 추가
		{
			provide: COMPOSITION_BUFFER_MODE,
			useValue: false
		}
	],
	bootstrap: [AppComponent]
})

 

 

 

코드를 추가한 뒤 다시 테스트해보면, 한글을 입력할 때마다 이벤트가 발생함을 알 수 있다.

 

 

 

 

COMPOSITION_BUFFER_MODE 와 useValue에 대한 정보는 아래 참고 사이트에 자세히 나와있으니 참고할 것!

 

 

 

 

 

 

참고 사이트

https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event

Element: compositionend event

http://devstory.ibksplatform.com/2017/07/angular2.html

Angular2 양방향 바인딩에서 한글이 짤리는 문제

https://angular.io/api/forms/COMPOSITION_BUFFER_MODE

Angular

https://poiemaweb.com/angular-service

Angular Service & Dependency Injection | PoiemaWeb