如何以角度处理视图和模型之间的输入数据

Question

我已经在 Angular（5.2 版）中工作了几个月，感觉好像我一定错过了一些相当明显的东西。我的问题是我需要在视图和模型之间对我的数据进行操作。

例如，我正在构建一个与 Microsoft 项目交互的简化应用程序。最终用户只需输入每个任务的开始和结束日期。根据我的组件中存在的其他一些因素，它可能会直接更新模型的开始/结束日期（+-额外天数）或更改该任务中的另一个变量。所以使用

<input type="date" [(task.startDate)] />

不太合适。我的解决方案是使用类似

<input type="date" (change)="processTheDate($event.value, task)" [value]="task.startDate" >


private processTheDate(value: Date, task: Task){

     //do some proccessing

     //set the value
     task.startDate = value;
}

根据我在网上看到的，这不是preferred solution

我的问题实际上是双重的。

1.在我的示例中篡夺 Angular 的数据绑定有什么问题？

2。有什么更好的选择？

Answer 1

1. 没有什么本质上是错误的（除了从视图调用私有方法）。但大多数时候，表单用于收集信息，然后在提交时对其进行处理。所以简单地将表单控件绑定到模型是有意义的。

2. 有几种选择：

   • 您可以使用基于模板的表单（即ngModel），除了简单地将字段绑定到task.startDate 之外，还可以使用(ngModelChange) 对模型更改做出反应，从而处理日期。或者您可以使用 setter 而不是公共字段，从而在 setter 内部完成工作
   • 您可以使用响应式表单，并订阅 FormControl 的 valueChanges observable，以便在每次值更改时收到通知，从而从那里处理日期。

Answer 2

我认为您的解决方案没有任何问题。

我认为使用ngModel 通常更适合双向绑定，因为您不必编写多次同步值的代码。但是，如果您需要在值更新时执行大量逻辑，则使用change 是完全可以的。

您也可以混合使用它们，以防您希望在值更改时执行一些逻辑时保持双向绑定。

<input type="date" (change)="onStartDateChange($event.value, task)" 
       [(ngModel)]="task.startDate" >

---

onStartDateChange(value: Date, task: Task){

     //do some proccessing

     //set the value
     task.startDate = value;
}