Javascript 使用“（ngModelChange）”引用角度模型？

简化：我有一个计算器，它不允许“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'   />

但现在事情变得复杂了

更改第一个输入时，我必须告诉

calc

功能：

• 为激活更改的控件更新模型-这就是为什么我在

  计算中发送“a”（“a”，$event）

  和

  计算中发送“b”（“b”，$event）

• 对更新的模型运行计算

但这种关联在我看来似乎是错误的：

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

.value

但我想我要用非角度的方式

问题

更新输入时如何引用控件的模型？（在设置时进行自定义逻辑）

---

PS-我没有

（输入）

事件，因为我在Nativescript中使用Angular。

您可以将

香蕉放在一个盒子中

和自定义逻辑一起使用

检查这个

您可以同时使用

[（ngModel）]

和

（ngModelChange）=“计算（$event）”

。这将首先更新模型，然后调用自定义函数

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

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

---

注意：

*1

用于将字符串解析为数字。这是我想用的黑客

您可以像这样使用Reactive from，模板文件中没有太多内容，例如html，所有脏东西都可以通过Typescript处理

<form class="form-horizontal"  [formGroup]="calculationForm" novalidate >
     <input type='text' "formControlName"='a'  /> + 
     <input type='text' "formControlName"='b'/> = 
     <input type='text' "formControlName"='c'   />
</form>

---

^这就是我希望找到的！简单得多。谢谢顺便说一句，我用

+X

代替

*1

。您可以在这里的

+

中看到它：

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

<form class="form-horizontal"  [formGroup]="calculationForm" novalidate >
     <input type='text' "formControlName"='a'  /> + 
     <input type='text' "formControlName"='b'/> = 
     <input type='text' "formControlName"='c'   />
</form>

      createForm() {
        this.calculationForm= this.fb.group({
          a: '',
          b: '',
          c: ''
        });
      }

  get a() {
    return this.calculationForm.get('a');
  }

  get b() {
    return this.calculationForm.get('b');
  }

  get c() {
    return this.calculationForm.get('c');
  }

    private onChanges(): void {
        this.a.valueChanges.subscribe(() => this.calculate());
        this.b.valueChanges.subscribe(() => this.calculate());
    }

  private calculate() {
        if (this.a.value && this.b.value) {
         this.c.setValue(this.a.value + this.b.value , {emitEvent: false});
        }
    }