Modell aktualisiert nicht auf Unschärfe-Ereignis

Question

Ich bin ziemlich neu in Angular2 und ich versuche, eine reaktive Form zu erstellen. Z.B. Ich versuche eine interaktive Datumseingabe zu erstellen.

Mein 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> 

und die entsprechende Typoskript für 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); 
} 

Das Modell ist die Aktualisierung in Ordnung, ich bin Überprüfung, dass mit console.log(). Die Ansicht wird nicht aktualisiert.

Ich hatte gehofft, dass die Eingabefelder würde das korrekte Datum zeigen, wie date-Pipe, aber ich bin falsch. In Angular 1.x war alles viel anders, ich verstehe, aber ich konnte mein Ziel erreichen.

Irgendwelche Vorschläge? Gibt es vielleicht eine Funktion, um das Modell "manuell" zu aktualisieren?

Answer 1

Sie versuchen, die Werteigenschaft Ihres Formularfelds direkt zu bearbeiten. Dies löst das Update nicht aus. Verwenden Sie stattdessen patchValuehttps://angular.io/docs/ts/latest/api/forms/index/FormControl-class.html

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

Zum Beispiel habe ich es wie folgt verwenden in meinem html:

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

In meinem TS Code:

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