ngModelChangeを使用した角度カスタムディレクティブ

Question

入力内の値をコンマで千にフォーマットする必要があります。私はこの方法をやっていた前に、これに伴う問題は、各入力フィールドのために、私はコンポーネントでupdateメソッドを追加する必要があるということであるTS

update(value: string) { 
    this.myModel = value.replace(/,/g, ''); 
    } 

を参照してください

<ion-input [ngModel]="myModel | number: '0-0'" (ngModelChange)="update($event)" format-number type="tel"></ion-input> 

の下のhtmlを参照してください。私が望むのは、そのための指示を作成することです。私は以下のように作成しました。

@Directive({ 
    selector: '[format-number]', // Attribute selector 
}) 
export class FormatNumbreDirective { 

    numberPipe = new DecimalPipe('en-US'); 
    @Output() ngModelChange: EventEmitter<any> = new EventEmitter(); 
    constructor() {} 

    @HostListener('input', ['$event']) oninput(event) { 
    const element = event.target as HTMLInputElement; 
    let value = element.value.replace(/,/g, ''); 
    this.ngModelChange.emit(this.numberPipe.transform(value, '.0-0')); 
    } 
} 

HTML

<ion-input [(ngModel)]="myModel" format-number type="tel"></ion-input> 

それは正常に動作します。しかし今、私はngModelChangeでそれを試してみたい。しかし、私は、 '最大呼び出しスタックサイズを超えました。'というエラーが表示されます。

@Directive({ 
    selector: '[format-number]', // Attribute selector 
    host: { 
    "(ngModelChange)": 'onInputChange($event)' 
    } 
}) 
export class FormatNumbreDirective { 

    numberPipe = new DecimalPipe('en-US'); 
    @Output() ngModelChange: EventEmitter<any> = new EventEmitter(); 
    constructor() { 
    } 

    onInputChange($event) { 
    let value = $event.replace(/,/g, ''); 
    this.ngModelChange.emit(this.numberPipe.transform(value, '.0-0')); 
    } 

} 

以下

参照ディレクティブを参照してくださいhtmlの助言のための

<ion-input [ngModel]="myModel" format-number type="tel"></ion-input> 

おかげ

Answer 1

使用この[(ngModel)]="myModel"それは価値がまだ