Question

具有三个分层字段的Angular 2表单，大多数情况下，它应具有相同的值，但有时不具有相同的值。为了加速数据输入，我希望将三个字段内容同步到后续字段，直到对字段进行修改。

例如如果我在第一个字段中键入“apples”，则字段值应为：

apples
apples
apples

如果我继续选择第二个字段并输入, pears，则字段值应为（即第三个字段仍在跟踪第二个字段）：

apples
apples, pears
apples, pears

如果我继续选中第三个字段并输入, and oranges，则字段值应为：

apples
apples, pears
apples, pears, and oranges

如果我继续通过shift-tabbing返回第二个字段并输入, and strawberries，则字段值应为：

apples
apples, pears, and strawberries
apples, pears, and oranges

我不应该在字段中标记提交才能成功。如果我在所有字段中使用apples点击上面的第一个方案，则三个字段应提交apples。

这显然不起作用：

<input [(ngModel)]="one">
<input [(ngModel)]="two"   value="{{one}}">
<input [(ngModel)]="three" value="{{two}}">

倾听来自ControlGroup的事件流似乎很有希望：

this.form.valueChanges
  .subscribe(
    v => { 
      console.log("change: ", JSON.stringify(v));
    }
  );

但映射可能是很多代码。 Here's plnkr which doesnt' work, yet, along these line.

Angular 2中是否有干净的方法来实现这一目标？

Answer 1

我不确定我完全理解你的问题，但我认为这应该做你想做的事情：

<input [(ngModel)]="one" #ione (blur)="itwo.value ? null : itwo.value = 'two'">
<input [(ngModel)]="two" #itwo (blur)="ithree.value ? null : ithree.value = 'three'">
<input [(ngModel)]="three" #ithree value="{{three}}">

Plunker example

Angular 2自动填写

1 个答案: