I am a beginner with Angular2 and I am currently working on creating a reactive form, specifically an interactive date input field.
Here is my HTML code:
<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>
And here is the related TypeScript code for 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);
}
The model is updating correctly, as confirmed by console.log(). However, the view does not reflect these changes.
I expected the input fields to display the correct date based on the date pipe, but it seems that my expectations were wrong. In Angular 1.x, things were different, but I managed to achieve my goal back then.
Any suggestions or advice? Is there a way to manually update the model?