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

문제 발생

사용자는 정확히 입력하였지만, 한글 마지막글자가 반영이 안된다.

한글과 같은 조합형 문자의 경우 일반적으로 글자를 입력 후 스페이스나 엔터 등을 통하여 문자 입력을 완료한 시점에 composition라는 이벤트가 발생하고, 이 이벤트에 따라 Angular는 양방향 바인딩을 처리한다.

해결방법

import {CUSTOM_ELEMENTS_SCHEMA, NgModule, NO_ERRORS_SCHEMA} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { HttpModule } from '@angular/http';

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

@NgModule({
    imports: [
        BrowserModule, HttpModule,
        AppRoutingModule,
        BsDropdownModule.forRoot(),
        TabsModule.forRoot(),
        ChartsModule,
     
    ],
    declarations: [
        AppComponent,
        FullLayoutComponent,
        NAV_DROPDOWN_DIRECTIVES,
        BreadcrumbsComponent,
        SIDEBAR_TOGGLE_DIRECTIVES,
        AsideToggleDirective,
        LoginMenuComponent,
    ],
    providers: [
      {
         provide: COMPOSITION_BUFFER_MODE,
         useValue: false      },
    ],
    bootstrap: [ AppComponent ],
    schemas: [ NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }

1. import { COMPOSITION_BUFFER_MODE } from '@angular/forms';
2. provide: COMPOSITION_BUFFER_MODE,
3. useValue: false

추가해주면 된다.