2017-06-06 11 views
2

私は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では、すべてが大きく異なっていましたが、私は理解しますが、私は目標を達成することができました。

提案がありますか?おそらくモデルを「手動で」更新する機能はありますか?

+2

:私のTSコードで

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

:代わりに、私は私のhtmlでこのようにそれを使用するたとえばpatchValuehttps://angular.io/docs/ts/latest/api/forms/index/FormControl-class.html

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

を使用タイトル](https://stackoverflow.com/help/tagging) – Liam

答えて

3

フォームフィールドのvalueプロパティを直接操作しようとしています。これは更新をトリガーしません。 [質問のタグを入れないでください

public recalculate(e) { 
    let currentValue = this.myForm.controls.get(myValue).value; 
    this.myForm.patchValue({ myValue: currentValue/10 }); 
} 
関連する問題