Question

简化：我有一个计算器，它不会允许＆＃34; 7＆＃34;结果（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中使用getter / setter - 我会在控制更新方面遇到问题。

这就是我使用(ngModelChange)的原因。每次更改的位置我都会调用calc函数：

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

但现在事情变得复杂了。

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

更新激活更改的控件的模型 - 这就是我发送＆＃34; a＆＃34;在calc("a",$event)和＆＃34; b＆＃34;在calc("b",$event)。
针对更新的模型运行计算。

但这种相关性对我来说似乎错了：

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

但我认为我会采用非棱角分明的方式

问题

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

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用于将字符串解析为数字。这是我想要使用的黑客攻击。

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

使用`（ngModelChange）`引用Angular中的模型？

2 个答案: