模型没有更新模糊事件

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 }); 
}