ngModelの入力を半角文字だけを入力できるようにしたい

投稿者: Anonymous

全角の文字を入力させないようにしたくpatternなどで試してみたのですが、
全角も入力ができてしまったため、パイプを使ったらどうかと思い、
入力値の変換パイプを用意しましたが、以下のようなエラーが出てしまします。

Uncaught Error: Template parse errors:
Parser Error: Got interpolation ({{}}) where expression was expected at column 0 in [{{testText | test-pipe}}] 

ngModelの入力値に対してのパイプによる変換はできないでしょうか?

test-pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'test-pipe'
})

export class TestPipe implements PipeTransform {

  transform(value: string): string {
    if (typeof value === 'string') {
      return valueの半角文字以外をreplaceしたものを返す
    }
    return '';
  }
}

表示するhtml

<input type="text" [(ngModel)]="{{testText | test-pipe}}">

表示するモジュール

@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [
    TestPipe,
  ],
})

解決

入力値をパイプで処理してinputに戻すには、次のように書きます。

<input type="text" [ngModel]="testText | test-pipe" (ngModelChange)="testText=$event" />

イベントバインディングで入力値を受け取り、プロパティバインディングでパイプで処理してinputに戻します。
プロパティバインディングはコンポーネント→ビューの片方向バインディングとするのが重要ですね。

回答者: Anonymous

Leave a Reply

Your email address will not be published.