@HostListenerで@HostListenerでディレクティブを使用してReactiveFormの入力値を更新すると入力がngInvalidではなくngValidに設定されています

Question

入力イベント（onKeyDown）で@HostListenerを使用するReactiveForm に通貨属性ディレクティブを組み込み、文字（文字と記号）は入力に入力されたとおりに入力しますが、数字と小数を使用できます。 BUTの場合、空の入力フィールドに無効な文字（すなわち、a）を入力し、そのディレクティブによって削除されると、のモデルはに更新されません。

通貨指令を使用してplunkerセットアップを追加しました。私の質問を理解するために従うための手順：フォームは（良い）が無効であるため、あなたは何の文字が許可されませんので、入力中aを得ることはありません、とボタンが無効になっている123a

1. タイプ
2. あなただけ小数点以下2桁以降の入力で6を得ることはありません123.456タイプが許可されている、とフォームが無効であるため、ボタンが無効になっているあなたが入力にaを得ることはありませんa（良い）
3. タイプ、 しかし モデルは、それはそれでaを持っていると考えているのでお尻はUIがそれを表示していなくても有効になっているあなたは、ボタンをクリックし、コンソールを調べて更新したモデルをされていないことを確認することができ

（悪い）this.form.valueを記録し、{ amount: 'a' }と表示します。次に有効な文字を入力すると、モデルにはその文字のみが含まれ、aは削除されます。したがって、モデルが正しく更新されないのはこの場合のみです。

これは簡単に$ダイジェストを実行するためにAngularJSを更新し、強制的にngModel validator and parser pipes、modelValue、$setViewValue、および$render()を使用してAngularJSで解決される問題でした。どのようにAngularでこれを行いますか？

この

が正常に不要な文字をトリム、私の属性ディレクティブからの抜粋です：新しいディレクティブが、これらのシナリオを処理するために導入され、最近の角度4リリースでは

@HostListener('input', ['$event']) 
    onKeyDown(event: KeyboardEvent) { 
    const input = event.target as HTMLInputElement; 

    // Only numbers and decimals 
    let trimmed = input.value.replace(/[^\d\.,]+/g, ''); 

    // Only a single decimal and choose the first one found 
    if (trimmed.split('.').length > 2) { 
     trimmed = trimmed.replace(/\.([^\.]*)$/, '$1'); 
    } 

    // Cannot start with decimal typed or pasted 
    if (trimmed.indexOf('.') === 0) { trimmed = ''; } 

    // AngularJS "like" solution would be something like: 
    // ngModelCtrl.$setViewValue(trimmed); 
    // ngModelCtrl.$render(); 
    // Angular solution is??? 

    input.value = trimmed; 
} 

Answer 1

については、以下のコードを使用します。入力フィールドはonKeyDownイベントのReactiveFormにあります - plunker

BUTスマートとダムコンポーネントの使用に基づいてEventEmitterを使用すると、実際には入力から親フォームに値を渡すより良いソリューションです - plunker（Todd MottoとUltimate Angularコースのおかげで）

Answer 2

<input [name]="fullName" pattern="[a-zA-Z ]*" [(ngModel)]="..."> 

でパターンは任意の正規表現を指定できます

Docs

更新：コメントに基づいて、ユーザーが文字を入力するのを制限しようとしている場合は、カスタム指示を使用できます。

だから私は、私は、そのコントロールのプロパティthis.ngControl.control.patchValue(newValue);にアクセスし、その後private ngControl: NgControlを注入されたアップデートNgControlを使用して、このための解決策を考え出すでしたあなたのディレクティブ機能

@HostListener('keydown') onKeydown() { 
     let value= this.el.nativeElement.value; 
    let key= value.charCodeAt(value.length -1]) 
    let strippedString =''; 
    if(!((key > 64 && key < 91) || (key> 96 && key< 123) || key== 8 || key== 32 || (key>= 48 && key<= 57)){ 
     strippedString = this.el.nativeElement.value.substring(0,value.length-1) 
     this.el.nativeElement.value = strippedString 
    } 

LIVE DEMO