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


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

[code]

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

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

test-pipe.ts

[code]

    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 '';
      }
    }
    
[/code]

表示するhtml

[code]

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

表示するモジュール

[code]

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




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

[code]

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

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




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

[code]

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

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

