Angular로 변환 확정 전에 input의 값을 얻고 싶을 때는 COMPOSITION_BUFFER_MODE

하고 싶은 일과 방법을 간편하게

Google 검색란은 변환을 확정하기 전부터 검색해 주시면 편리하네요.



Angular 에서 이와 같이 변환 확정전의 입력치를 사용하고 싶을 때에는 COMPOSITION_BUFFER_MODE 이 도움이 됩니다. 모듈이나 컴포넌트의 providers 에서 COMPOSITION_BUFFER_MODE 를 false 로 하면, IME 의 변환이 확정되어 있지 않아도 input 의 입력치가 모델에 반영됩니다.

데모 페이지

출처

자세한 설명

입력한 문자를 표시하기 위한 간단한 코드를 생각해 보십시오.

<input ngModel #text="ngModel"> {{ text.value }}

PC 브라우저에서 조작하면 변환이 완료될 때까지 입력한 문자가 표시되지 않습니다. 왜 이런 동작이 되는가 하면, Angular 가 변환이 확정할 때까지 모델에 입력치를 반영시키고 있지 않기 때문입니다. 구체적인 처리는 DefaultValueAccessor에 써 있습니다.

이 동작은 COMPOSITION_BUFFER_MODE 값을 설정하여 변경할 수 있습니다.

true 이면 변환을 확인할 때까지 모델에 반영되지 않습니다.

false 이면 변환을 확인하기 전에도 모델에 반영됩니다.

무지정일 때는 Android라면 true , 그 이외라면 false를 지정했을 때와 같은 동작을 합니다. 자세한 내용은 DefaultValueAccessor 구현 참조

처음 쓴 데모에서는 이러한 세 가지 설정에 대해 동작을 확인할 수 있습니다. 바쁜 사람을 위해서, 실제로 조작하고 있는 모습의 동영상을 붙여 둡니다. false 때만 변환 확정 전에도 값을 표시할 수 있네요.



변환을 확정하기 전에도 모델에 반영시키기 위해false로 하는 코드의 이미지입니다. 이와 같이 AppModule 에 써도 좋고, 컴퍼넌트 단위로 거동을 바꾸고 싶을 때는 컴퍼넌트측에 써도 상관없습니다.

import { COMPOSITION_BUFFER_MODE } from '@angular/forms'

@NgModule({
  // ...
  providers: [
    // 変換が確定する前でも input の値を得られるようにするため
    { provide: COMPOSITION_BUFFER_MODE, useValue: false }
  ]
})
export class AppModule {}

이것으로 서제스트나 문자수 카운트등의 기능도 마음대로! Happy Angular Life!

참고

자바스크립트 및 크로스 브라우저에서의 IME event handling (2017년) - 타니시킨구 댐 - input 이벤트나 compositionend 이벤트 주위의 이야기가 참고가 되었습니다

fix(forms): make composition event buffering configurable (#15256) · angular/angular@5efc860 - 이 처리가 들어간 커밋