模型沒有更新模糊事件

Question

我是Angular2的新手，我試圖創建一個反應形式。例如。我正在嘗試創建一個交互式日期輸入。

我的HTML：

<div class="date ui-input"> 
    <input type="text" name="dateD" [ngModel]="model.date | date:'dd'" (blur)="setDate($event.target.value, 'd')" maxlength="2" /> 
    <div>.</div> 
    <input type="text" name="dateM" [ngModel]="model.date | date:'MM'" (blur)="setDate($event.target.value, 'm')" maxlength="2" /> 
    <div>.</div> 
    <input type="text" name="dateY" [ngModel]="model.date | date:'y'" (blur)="setDate($event.target.value, 'y')" maxlength="4" /> 
</div> 

而對的setDate（相應的打字稿）：

setDate(input:number, type:string[1]) { 
    let min = 1; 
    let max = 1; 
    let fn = null; 

    switch(type) { 
     case 'd': 
      max = 31; 
      fn = 'setDate'; 
      break; 
     case 'm': 
      input -= 1; 
      min = 0; 
      max = 11; 
      fn = 'setMonth'; 
      break; 
     case 'y': 
      min = 1990; 
      max = 9999; 
      fn = 'setFullYear'; 
      break; 
    } 
    if(input < min) { 
     input = min; 
    } 
    else if(input > max) { 
     input = max; 
    } 

    if(fn) 
     this.model.date[fn](input); 

    console.log(this.model.date); 
} 

該模型更新罰款，我檢查與console.log()。該視圖不更新。

我希望輸入字段會顯示正確的日期，根據date-管道，但似乎我錯了。在Angular 1.x中，所有東西都大不相同，我明白，但是我能夠實現我的目標。

有什麼建議嗎？是否有可能「手動」更新模型的功能？

Answer 1

您試圖直接操作您的表單字段的值屬性。這不會觸發更新。相反，使用patchValuehttps://angular.io/docs/ts/latest/api/forms/index/FormControl-class.html

$event.target.patchValue({dateY: value}); 

比如我在HTML中使用這樣的：

<form [formGroup]="myForm"> 
    <input formControlName="myValue" (ionChange)="recalculate($event)"> 
</form> 

在我的TS碼：

public recalculate(e) { 
    let currentValue = this.myForm.controls.get(myValue).value; 
    this.myForm.patchValue({ myValue: currentValue/10 }); 
}