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



남도패스 사이트 운영중에 사용자로부터 다음과 같은 오류사항을 접수 받았습니다.


말씀주신 오타는 저희의 오타가 아닌 입력 부분 오류임을 말씀드립니다.

1. 업장명 등 글자를 입력하면 끝 글자는 자음만 표시가 됩니다.
 예) 유명횟집-유명횟ㅈ     저희는 지금 맨 마지막 글자만 스페이스바로 임의적으로 입력하고 있습니다.

2, 전체적인 글자가 안 보이는 현상 (그러떄가 있고 안 그럴 때가 있어요)
 예) 서대회 제공 - 대회 제공     앞글자가 안 나옵니다. 혜택뿐 아니라 다른 텍스트 입력에도 나오는 현상입니다.
   아래 상세 내용은 입력해도 홈페이지에 안 나오네요.


사용자는 정확히 입력하였지만, 마지막글자가 반영되지 않는 것을 확인할수 있었습니다.


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


 작성중인 문자를 모두 바인딩하기 위해서는 Angular에서 제공되는 COMPOSITION_BUFFER_MODE를 변경합니다.


프로젝트 전체에서 일괄반영하기 위해
app.module.ts 에서 valueProvider를 사용하여 주입시켜 주면 됩니다.


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 { }


COMPOSITON_BUFFER_MODE의 상세 내용을 아래의  angular 공식 사이트에서 확인할 수 있습니다

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



댓글

  1. 아주 유용한 정보네요. 감사합니다.

    답글삭제
  2. 제가 정말 찾던 정보입니다. 감사합니다!

    답글삭제
  3. 해당 이슈 공유해주신 덕분에 정말 빠르게 처리했네요

    감사합니다

    답글삭제

댓글 쓰기

주간 인기글

카드뉴스 마케팅 팁

[ubuntu] 신규 계정에 sudo 권한 추가하기

[Spring Boot] Pageable 커스터마이징하기

[카드뉴스] 강아지가 몸을 터는 이유는?

[AWS] SES 를 활용한 이메일 발송 테스트