使用角度更新多个 html 输入元素答案

【问题标题】：Updating multiple html input elements using angular使用角度更新多个 html 输入元素
【发布时间】：2018-10-11 18:42:09
【问题描述】：

Angular 2/4：假设有三个文本输入 html 元素。在更新任何一个文本时，其他两个文本应根据逻辑进行更新。使用 Angular 实现这一目标的最佳方法是什么？ onChange 函数在这里不起作用，因为它会为每个元素循环调用相同的函数。

【问题讨论】：

你能添加一些代码吗？
为什么说不能绑定change事件呢？除非您在 ngFor 循环中以编程方式生成输入，否则这应该有效。在这种情况下，您可以将 ngFor 循环的索引作为参数传递给组件中的任何 onchange 函数，这样它就会准确地知道哪个被更改了
请提供一些代码来解释您的预期行为？当前行为？以及您迄今为止所做的尝试，以便其他人可以为您提供帮助。

标签： javascript html angular angular2-forms angular4-forms

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

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

附言。对于所有说 onChange 会起作用的人，它不会起作用，因为这家伙在每个输入字段中都有 ngModel，当您触发一个 onChange 时，这将改变其他模型，这将触发它们上的 onChange 并更改第一个模型...... .你知道我要去哪里:)，我很好奇的是实际问题是什么，每个输入字段都会以不同的方式影响其他字段，或者它们之间是否具有相同的相关性......

【讨论】：