javascript - 使用 `(ngModelChange)` 在 Angular 中引用模型？

Question

简化:我有一个不允许“7”作为结果的计算器(valid 将是 false)。

计算器本身是实现ControlValueAccessor的组件。

模型是

interface IModel {
  a, b, c: number | null; 
}

(a是左边的数字，b是中间的数字，c是结果)

我是这样写模板的:

 <input type='text' [ngModel]='myModel.a'   (ngModelChange)='calc("a",$event)'/> + 
 <input type='text' [ngModel]='myModel.b'   (ngModelChange)='calc("b",$event)'/> = 
 <input type='text' readonly [ngModel]='myModel.c'   />

我没有在盒子里使用香蕉，因为我必须对输入的每次修改都做一个逻辑。
我没有使用 getter/setter，因为否则 - 在 setter 中 - 我会在控制更新方面遇到问题。

这就是我使用 (ngModelChange) 的原因。在每次更改时，我调用 calc 函数的位置:

 calc(propName,e) {
    this.myModel[propName] = e;
    this.myModel.c = +this.myModel.a + +this.myModel.b;
    this.onChangeCallback(this.myModel);
  }

但现在事情变得复杂了。

当更改第一个输入时，我必须告诉 calc 函数:

• 为激活更改的控件更新模型 - 这就是为什么我在 calc("a",$event) 中发送“a”并在 calc("b",$event).
• 针对更新后的模型运行计算。

但这种相关性对我来说似乎是错误的:

当然 - 我可以向每个模板变量添加模板变量并发送该变量并在 calc 函数中读取 .value。

但我想我要进入非 Angular 方式

问题

如何在更新输入时引用控件的模型？ (以及在设置时执行自定义逻辑)

ONLINE DEMO

PS - 我没有 (input) 事件，因为我在 Nativescript 中使用 Angular。

Answer 1

您可以将 banana in a box 和您的自定义逻辑一起使用。

检查这个stackblitz

您可以一起使用 [(ngModel)] 和 (ngModelChange)="calc($event)"。这将首先更新您的模型，然后调用您的自定义函数。

因此，按如下方式更改您的标记

<input type='text' [(ngModel)]='myModel.a'   (ngModelChange)='calc()'/> + 
<input type='text' [(ngModel)]='myModel.b'   (ngModelChange)='calc()'/> = 
<input type='text' readonly [ngModel]='myModel.c'/>

calc 方法:

calc() {
   this.myModel.c = this.myModel.a * 1 + this.myModel.b * 1
}

注意:* 1 用于将字符串解析为数字。这是我想使用的 hack。