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（）的相应TypeScript：

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

您正在尝试直接操作表单字段的value属性。这不会触发更新。相反，请使用patchValue https://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 });
}

模型不会更新模糊事件

1 个答案: