0

全角の文字を入力させないようにしたく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,
  ],
})

1 件の回答 1

0

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

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

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

1
  • shimiteiさま、ありがとうございます。バインディングがまだ完全に理解できず、もう少しいろいろ試してみようと思います。
    – kanko
    Commented 2017年11月6日 0:11

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。