Angular5数组输入框push新元素后旧值丢失问题咨询

嘿，这个坑我之前也踩过！核心问题出在你所有的<input>都用了同一个name="name"属性——Angular的ngModel依赖控件的name来追踪表单状态和绑定关系，当多个输入框共享同一个name时，push新元素后Angular的表单控件复用/注册机制会导致旧输入框的值被意外清空。

解决方案：给每个输入框设置唯一的name属性 #

在*ngFor中添加索引变量，把name属性绑定为带索引的唯一值，让每个输入框拥有独立的表单控件追踪：

修改后的模板代码：

<div *ngFor="let x of X; let i = index"> 
  <input [(ngModel)]="x.name" type="text" class="form-control" name="name-{{i}}" maxlength="250" aria-required="true"> 
  <button (click)="null_append(X)">append</button> 
</div>

为什么这样有效？ #

Angular的Forms模块处理ngModel时，会通过控件的name属性在表单控件集合中注册唯一条目。当所有输入框共用同一个name时，新添加的输入框会覆盖旧的控件注册信息，导致原本绑定的旧值被同步为新元素的null。给每个输入框分配唯一name后，每个控件都有独立的状态追踪，push新元素时不会影响已有的输入框值。

额外优化：简化你的null_append函数 #

可以用数组的some()方法替代手动循环，代码更简洁高效：

X = [{name: null}];

null_append(o) { 
  const hasNullItem = o.some(item => item.name === null);
  if (!hasNullItem) { 
    o.push({name: null}); 
  } 
}

内容的提问来源于stack exchange，提问作者sadaf2605