Angular 2：尝试在控制器内使用 onModelChange 更新 ngModel答案

【问题标题】：Angular 2 : trying to update ngModel with onModelChange inside the controllerAngular 2：尝试在控制器内使用 onModelChange 更新 ngModel
【发布时间】：2018-01-27 03:00:12
【问题描述】：

我正在尝试在onModelChange 中更新ngModel

我知道我们可以这样做：

<input [ngModel]="myValue" (ngModelChange)="myValue = $event" />

但这不是我想要的。在更新myValue之前我需要做一些验证@

这是我的代码：

<input mdInput type="number" 
       [ngModel]="tax.refundAmount" 
       (ngModelChange)="onChange($event, tax.paidAmount)" />

在控制器中：

onChange($event, maxValue) {
    if ($event > maxValue) {
        $event = maxValue;
    }
}

但是ngModel没有更新:(

如何更新控制器内的模型？ 此处显示的输入位于 ngFor 循环内，因此我无法直接访问模型

编辑：

我尝试使用[(ngModel)] 和(change)，但将事件发送到父控制器时存在时间问题

更新 1

我想在组件类中在更新模型后做一些事情，比如发出事件或计算值。因此我无法返回值然后更新模板中的模型。

【问题讨论】：

$event 真的是number吗？
是的，应该是。 export class Tax { paidAmount: number; refundAmount: number; currency: string; type: string; } 我会尝试强制强制转换为 int
您是否尝试将tax 传递给function 并改为设置tax.refundAmount？或者这会导致死循环吗？
是的，我也试过了，但仍然没有更新：/
(change)="onChange'()' ? (input)="onChange()" ?

标签： javascript html angular angular-ngmodel

【解决方案1】：

试试这个？

<input mdInput type="number" 
               [ngModel]="tax.refundAmount" 
               (ngModelChange)="tax.refundAmount = onChange($event, tax.paidAmount, tax.refundAmount)" />

还有你的控制器：

onChange($event, maxValue, refundAmount) {
    return $event > maxValue ? maxValue : refundAmount;
}

【讨论】：

没有尝试，因为我需要在更新值后发出 @Output() 。但我猜它应该适用于其他情况
然后在onChange方法中返回之前发出值？但坦率地说，你更好的解决方案是被动响应。
如果我在返回值之前发出，则调用父组件上的发出函数时模型不会更新
我认为您可能希望将更多源添加到您的问题中......您有一个事件发射器，接下来您将调用它。这不应该阻止您在组件中的 return 执行吗？
我已经更新了我的问题。我将学习反应形式，因为我从未尝试过。如果需要在其他人发生变化时动态更新我的输入，这似乎是一个很好的解决方案