Angular 角度2自动填充

Angular 角度2自动填充,angular,Angular,具有三个层次结构字段的角度2表单,大多数情况下,这些字段应具有相同的值,但有时不具有相同的值。为了加快数据输入速度,我希望三个字段的内容与后续字段同步,直到对字段进行修改 例如 如果我在第一个字段中键入“apples”,则字段值应为: apples apples apples apples apples, pears apples, pears, and oranges apples apples, pears, and strawberries apples, pears, and ora

具有三个层次结构字段的角度2表单,大多数情况下,这些字段应具有相同的值,但有时不具有相同的值。为了加快数据输入速度,我希望三个字段的内容与后续字段同步,直到对字段进行修改

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

apples
apples
apples
apples
apples, pears
apples, pears, and oranges
apples
apples, pears, and strawberries
apples, pears, and oranges
如果我继续切换到第二个字段并键入
,pears
,则字段值应为(即第三个字段仍在跟踪第二个字段):

如果我继续切换到第三个字段并键入
,然后键入oranges
,则字段值应为:

apples
apples
apples
apples
apples, pears
apples, pears, and oranges
apples
apples, pears, and strawberries
apples, pears, and oranges
如果我继续按住shift键返回第二个字段并键入
,然后键入草莓
,则字段值应为:

apples
apples
apples
apples
apples, pears
apples, pears, and oranges
apples
apples, pears, and strawberries
apples, pears, and oranges
我不必为提交成功而在字段中添加标签。如果我在上面的第一个场景中,在所有字段中用
apples
点击回车键,那么这三个字段应该提交
apples

这显然不起作用:

<input [(ngModel)]="one">
<input [(ngModel)]="two"   value="{{one}}">
<input [(ngModel)]="three" value="{{two}}">
但是映射可能需要很多代码


Angular 2中是否有一个干净的方法来实现这一点?

我不确定我是否完全理解您的问题,但我认为这应该满足您的要求:

<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}}">


我不确定我是否完全理解你的问题,但我认为这应该满足你的要求:

<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}}">


很抱歉,发生了名称冲突。我更新了我的答案。更接近,但当2发生变化时,3没有更新。也许我误解了你的问题。我想它应该在第一次还是空的时候才更新。我更新了这个问题,以便在这方面更清楚一点,@GZSorry,发生了名称冲突。我更新了我的答案。更接近,但当2发生变化时,3没有更新。也许我误解了你的问题。我认为它应该在第一次还是空的时候才更新。我更新了这个问题,以便在这方面更清楚一点,@GZ