使用angular更新多个html输入元素

时间:2018-05-01 17:56:12

标签: javascript html5 angular angular2-forms angular4-forms

Angular 2/4:假设有三个文本输入html元素。在更新任何一个时,另外两个文本应该基于逻辑更新。使用角度来实现这一目标的最佳方法是什么? onChange函数在这里不起作用,因为它将为每个元素执行相同函数的循环调用。

3 个答案:

答案 0 :(得分:1)

如果您尝试使输入相互依赖,我认为Reactive Forms将是我认为的最佳解决方案。 或者如果您坚持使用模板驱动,您可以创建三个单独的变量,它们的值将根据任何输入的变化而变化

答案 1 :(得分:0)

假设您要在用户取消选择输入字段后触发该功能更新其他两个字段,那么您要查找的事件为blur

您可以在javascript中访问用户输入并添加“逻辑”以确定其他自动填充文本字段的文本。

答案 2 :(得分:0)

如果您希望用户在调用函数之前离开输入框,我同意Rambo772,但如果您想要实时,则只需执行按键事件:

<input type=text [(ngModel)]="model" (keypress)="eventHandler($event, model)">

eventHandler(event, model) {
   console.log(event, event.keyCode, event.keyIdentifier, model);
}

PS。 对于所有人说onChange会工作,它不会,因为这个人在每个输入字段中都有ngModel,当你触发一个onChange时,这将改变其他模型,这些模型将触发onChange并更改第一个...你知道我要去哪里:),我很好奇的是实际问题是,每个输入字段会不同地影响其他输入字段,或者它们与每个输入字段具有相同的相关性其他...