イオニック3のngModelとは別に入力値を角度4で設定するには

Question

ionic 3アプリで通貨入力用に作成する指令があります。私が基本的に望むのは、$ 11.11と言うが、ngModelの値を11.11と設定する入力です。

私のモデル値が正しく設定されていて、フォーマットされた文字列の値は正しいですが、入力値を表示してフォーマットされた値を表示できません。実際には、入力した文字、句読点はすべて表示されますが、ログに記録されたすべての値は正しいものです。誰かが私が逃していること、または私が達成しようとしていることについてもっと良い方法を知っていますか？入力に入力された

例
テキスト：1111
ngModel値：11.11
にconsole.log入力値：$ 11.11
実際の入力値：1111（$ 11.11でなければなりません）

import {Directive, Attribute, Output, EventEmitter, ElementRef, Renderer2} from '@angular/core'; 
import { NgModel } from '@angular/forms'; 
import {CurrencyPipe} from "@angular/common"; 

/** 
* Generated class for the CurrencyInputDirective directive. 
* 
* See https://angular.io/docs/ts/latest/api/core/index/DirectiveMetadata-class.html 
* for more info on Angular Directives. 
*/ 
@Directive({ 
    selector: '[currency-input]', 
    providers: [NgModel] 
}) 
export class CurrencyInputDirective { 

    maximumAmount: number; 
    currencyCode: string; 
    decimals: number; 
    modelValue: number; 

    @Output() ciExceededMax: EventEmitter<any> = new EventEmitter(); 

    constructor(public model: NgModel, 
       public elementRef: ElementRef, 
       private currencyPipe: CurrencyPipe, 
       private renderer: Renderer2, 
       @Attribute("ci-maximum-amount") maximumAmount: number, 
       @Attribute("ci-currency-code") currencyCode: string, 
       @Attribute("ci-decimals") decimals: number) { 

    this.maximumAmount = (maximumAmount) ? maximumAmount : 10000; 
    this.currencyCode = (currencyCode) ? currencyCode: 'USD'; 
    this.decimals = (decimals) ? Math.trunc(decimals) : 2; 

    let directive = this; 
    this.model.valueChanges.subscribe(function (value) { 
     directive.modelValue = directive.getModelValue(value); 
     directive.model.viewToModelUpdate(directive.modelValue); 
     directive.writeValueToInput(directive.getFormattedModelValue(directive.modelValue)); 
    }); 

    } 

    writeValueToInput(value) { 

    //this.elementRef.nativeElement.value = value; 
    this.renderer.setProperty(this.elementRef.nativeElement, 'value', value); 

    console.log("element ref value " + this.elementRef.nativeElement.value); 
    console.log("element ref " + JSON.stringify(this.elementRef.nativeElement, undefined, 2)); 
    } 

    getFormattedModelValue(value) { 
    let currencyDecimals = '1.' + this.decimals + "-" + this.decimals; 

    let retVal: string = (!value) ? null : this.currencyPipe.transform(value, this.currencyCode, true, currencyDecimals); 
    return (retVal) ? retVal : this.currencyPipe.transform(0, this.currencyCode, true, currencyDecimals); 
    } 

    getModelValue(value) { 

    if(!value) 
     return 0; 

    let strippedValue: string = value.replace(/[^0-9]/g,""); 
    let parsedInt: number = parseInt(strippedValue); 
    let calculatedAmount = (parsedInt/Math.pow(10, this.decimals)); 

    if(calculatedAmount > this.maximumAmount){ 
     calculatedAmount = this.modelValue; 

     setTimeout(() => { 
     this.ciExceededMax.emit({amount: calculatedAmount, maxAmount: this.maximumAmount}); 
     }, 1); 
    } 

    console.log("returning calculated amount " + calculatedAmount); 

    return calculatedAmount; 
    } 

} 

Answer 1

Iとった。私は入力値を書き込むためにNgControlを使う必要がありました。

import {Directive, Attribute, Output, EventEmitter} from '@angular/core'; 
import {NgModel, NgControl} from '@angular/forms'; 
import {CurrencyPipe} from "@angular/common"; 

/** 
* Generated class for the CurrencyInputDirective directive. 
* 
* See https://angular.io/docs/ts/latest/api/core/index/DirectiveMetadata-class.html 
* for more info on Angular Directives. 
*/ 
@Directive({ 
    selector: '[currency-input]', 
    providers: [NgModel] 
}) 
export class CurrencyInputDirective { 

    maximumAmount: number; 
    currencyCode: string; 
    decimals: number; 
    modelValue: number; 

    @Output() ciExceededMax: EventEmitter<any> = new EventEmitter(); 

    constructor(public model: NgModel, 
       private control : NgControl, 
       private currencyPipe: CurrencyPipe, 
       @Attribute("ci-maximum-amount") maximumAmount: number, 
       @Attribute("ci-currency-code") currencyCode: string, 
       @Attribute("ci-decimals") decimals: number) { 

    this.maximumAmount = (maximumAmount) ? maximumAmount : 10000; 
    this.currencyCode = (currencyCode) ? currencyCode: 'USD'; 
    this.decimals = (decimals) ? Math.trunc(decimals) : 2; 

    let directive = this; 
    this.model.valueChanges.subscribe(function (value) { 
     directive.modelValue = directive.getModelValue(value); 
     directive.model.viewToModelUpdate(directive.modelValue); 
     directive.control.valueAccessor.writeValue(directive.getFormattedModelValue(directive.modelValue)); 
    }); 

    } 

    getFormattedModelValue(value) { 
    let currencyDecimals = '1.' + this.decimals + "-" + this.decimals; 

    let retVal: string = (!value) ? null : this.currencyPipe.transform(value, this.currencyCode, true, currencyDecimals); 
    return (retVal) ? retVal : this.currencyPipe.transform(0, this.currencyCode, true, currencyDecimals); 
    } 

    getModelValue(value) { 

    if(!value) 
     return 0; 

    let strippedValue: string = value.replace(/[^0-9]/g,""); 
    let parsedInt: number = parseInt(strippedValue); 
    let calculatedAmount = (parsedInt/Math.pow(10, this.decimals)); 

    if(calculatedAmount > this.maximumAmount){ 
     calculatedAmount = this.modelValue; 

     setTimeout(() => { 
     this.ciExceededMax.emit({amount: calculatedAmount, maxAmount: this.maximumAmount}); 
     }, 1); 
    } 

    return calculatedAmount; 
    } 

}