用`（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 。

但是我想我会进入非角度的方式

题

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

在线演示

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

Answer 1

您可以banana in a box使用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用于将字符串解析为数字。 我想使用这种技巧。

Answer 2

您可以这样使用Reactive，在模板文件即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>

ts文件将是

      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});
        }
    }