[英]Referencing a model in Angular with `(ngModelChange)`?
Simplification : I have a calculator which won't allow "7" to be the result ( valid
will be false
). 简化:我有一个不允许将“ 7”作为结果的计算器(
valid
false
)。
The calculator itself is component which implements ControlValueAccessor
. 计算器本身是实现
ControlValueAccessor
组件。
The model is 该模型是
interface IModel {
a, b, c: number | null;
}
( a
is the left digit , b
is the middle one , and c
is the result) (
a
是左数位, b
是中间数位, c
是结果)
This is how I wrote the template : 这就是我写模板的方式:
<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' />
I didn't use banana in a box becuase I had to do a logic on each modification of the inputs. 我没有在盒子中使用香蕉,因为我必须对输入的每次修改都进行逻辑运算。
I didn't use getter/setter either becuase otherwise- in the setter - I'd would have problem with controlling updates. 否则,我不会使用getter / setter-在setter中-控制更新会遇到问题。
So that's why I use (ngModelChange)
. 这就是为什么我使用
(ngModelChange)
的原因。 Where on each change I call the calc
function : 在每次更改的地方,我调用
calc
函数:
calc(propName,e) {
this.myModel[propName] = e;
this.myModel.c = +this.myModel.a + +this.myModel.b;
this.onChangeCallback(this.myModel);
}
But now things get complicated. 但是现在事情变得复杂了。
When changing the first input , I must tell the calc
function : 更改第一个输入时,我必须告诉
calc
函数:
calc("a",$event)
and "b" in calc("b",$event)
. calc("a",$event)
发送“ a”并在calc("b",$event)
。 But this correlation seems WRONG to me : 但是这种关联对我来说似乎是错误的:
Sure - I could add template variable to each and send that variable and to read .value
in the calc function. 当然-我可以向每个变量添加模板变量,然后发送该变量并在calc函数中读取
.value
。
But I think I'm going into the non-angular way 但是我想我会进入非角度的方式
Question 题
How can I reference the model of the control when updating the input? 更新输入时如何引用控件的模型? ( Along with doing custom logic when set)
(以及在设置时执行自定义逻辑)
PS - I don't have the (input)
event since i'm using Angular in Nativescript. PS-因为我在Nativescript中使用Angular,所以没有
(input)
事件。
You can use banana in a box
and your custom logic together. 您可以
banana in a box
使用banana in a box
也可以一起使用自定义逻辑。
Check this stackblitz 检查这个stackblitz
You can use [(ngModel)]
and (ngModelChange)="calc($event)"
together. 您可以一起使用
[(ngModel)]
和(ngModelChange)="calc($event)"
。 What this will do is to update your model first and then call your custom function. 这将首先更新您的模型,然后调用您的自定义函数。
So, change your markup as follows 因此,如下更改标记
<input type='text' [(ngModel)]='myModel.a' (ngModelChange)='calc()'/> +
<input type='text' [(ngModel)]='myModel.b' (ngModelChange)='calc()'/> =
<input type='text' readonly [ngModel]='myModel.c'/>
calc
method: calc
方法:
calc() {
this.myModel.c = this.myModel.a * 1 + this.myModel.b * 1
}
Note: * 1
is for parsing string to number. 注意:
* 1
用于将字符串解析为数字。 It's a hack I'd like to use. 我想使用这种技巧。
You can use Reactive from like this , Not much in template file ie html , all dirty stuff handle by Typescript 您可以这样使用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 file would be 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});
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.