Help us understand the problem. What is going on with this article?

Angular で変換確定前に input の値を得たい時は COMPOSITION_BUFFER_MODE

More than 1 year has passed since last update.

やりたいことと方法を手短に

Google の検索欄って、変換を確定する前から検索してくれて便利ですよね。

GoogleSuggest.gif

Angular でこのように変換確定前の入力値を使いたいときには COMPOSITION_BUFFER_MODE が役に立ちます。モジュールやコンポーネントの providersCOMPOSITION_BUFFER_MODEfalse にすれば、 IME の変換が確定していなくても input の入力値がモデルに反映されます。

詳しい説明

入力された文字を表示するだけの簡単なコードを考えます。

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

これを PC のブラウザで操作すると、変換を確定するまで入力した文字が表示されないはずです。なぜこのような動作になるかというと、 Angular が変換が確定するまでモデルに入力値を反映させていないからです。具体的な処理は DefaultValueAccessor に書いてあります。

この挙動は COMPOSITION_BUFFER_MODE の値を設定することで変えることができます。

  • true なら変換を確定するまでモデルに反映されません。
  • false なら変換を確定する前でもモデルに反映されます。
  • 無指定の時は Android なら true、それ以外なら false を指定したときと同じ動作をします。詳しくは DefaultValueAccessor の実装を参照

最初に書いたデモでは、これら3種類の設定について動作を確認することができます。忙しい人のために、実際に操作している様子の動画を貼っておきます。 false のときだけ変換確定前でも値を表示できていますね。

demo.gif

変換を確定する前でもモデルに反映させるために false にするコードのイメージです。このように AppModule に書いてもいいですし、コンポーネント単位で挙動を変えたいときはコンポーネント側に書いても構いません。

import { COMPOSITION_BUFFER_MODE } from '@angular/forms'

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

これでサジェストや文字数カウントなどの機能も思いのまま! Happy Angular Life!

参考

rch850
主にサーバぺしぺししてるエンジニアです!
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away