從Angular2的貨幣掩碼輸入中獲取值

Question

我在表單的輸入內使用了maskMoney jquery插件。當我想從這些輸入字段獲取數據時，它是空的！

這裏是我的MaskMoney指令：

import {Directive, ElementRef} from "@angular/core"; 
declare var $: any; 

@Directive({ 
    selector: '[money]' 
}) 
export class CurrencyMaskDirective { 
    constructor(public el: ElementRef) { 
    let native = el.nativeElement; 
    $(native).maskMoney({ 
     suffix: " $", 
     thousands: '،', 
     decimal: '', 
     precision: 3, 
     affixesStay: false 
    }); 
    } 
} 

這裏是我的形式：

<form role="form" #f="ngForm" (ngSubmit)="addcharge(f)" novalidate> 
    <input type="text" name="value" #value="ngModel" ngModel money> 
</form> 

// in ts file 
addcharge(g) { 
    console.log(g.value); 
} 

當我登錄該值在控制檯空！我怎樣才能正確地從輸入中獲得價值？

謝謝。

Answer 1

您DONOT需要一個單一的輸入我覺得形式這應該做工精細

<div> 
    <input type="text" name="value" #titleInput money> 
    <button type="submit" (click) = 'addTodo(titleInput.value)'>Add</button> 
</div> 


    addTodo(title:string) { 
    console.log(title); 
    } 

如果你需要尋找到具有反應活性或模板驅動的形式，你可以看看@這個頁面的例子

https://rahulrsingh09.github.io/AngularConcepts/#/reactive

https://rahulrsingh09.github.io/AngularConcepts/#/template

更新

入住此Plunker鏈接

https://plnkr.co/edit/oicEbx5HQj3T208GCuU7?p=preview

Answer 2

我認爲你必須分配ngModel在HTML視圖如下面的代碼。

<form role="form" #f="ngForm" (ngSubmit)="addcharge(f)" novalidate> 
    <input type="text" name="value" #value="ngModel" [(ngModel)]="moneyValue" money> 
</form> 

// in ts file 
moneyValue: string = null; 
addcharge(g) { 
    console.log(this.moneyValue); 
}