Angular2中点击新增按钮创建重复表单区块的实现问题

我看了你的代码，发现几个关键问题导致点击新增按钮无法生成新的表单区块，下面一步步帮你排查修复：

1. 修复DOM结构错误 #

你的HTML代码里有一个多余的</div>标签，在</form>之前多闭合了一个div，这会导致Angular模板渲染异常——虽然没有报错，但会干扰组件的正常工作。把多余的</div>删掉：

<form *ngFor="let emergency of Emergencies; let i = index">
  <div>
    <label> Name</label>
    <input type="text" [(ngModel)]="emergency.Name" name="emergencyName_{{i}}" />
  </div>
  <div>
    <label>Phone</label>
    <input type="text" OnlyNumber="true" [(ngModel)]="emergency.Phone" name="emergencyPhone_{{i}}" maxlength="15" />
  </div>
  <div>
    <label>Relations</label>
    <select class="col-lg-6 col-md-6 col-sm-6 col-xs-6" [(ngModel)]="emergency.ship" name="emergencyShip_{{i}}">
      <!-- 下拉选项后续修复 -->
    </select>
  </div>
</form>

2. 确保表单控件的name属性唯一 #

模板驱动表单中，每个绑定ngModel的控件必须有唯一的name属性。你之前的name="emergency.Name"写法不仅不规范，还会导致循环中所有控件的name重复，Angular无法正确区分不同的表单实例。结合*ngFor的index生成唯一name，比如上面代码里的name="emergencyName_{{i}}"。

3. 修复下拉选择框的选项渲染 #

你的select里只有一个硬编码的{{ship.Description}}，没有遍历关系选项数组。假设你有一个shipList数组存储所有关系选项：

shipList = [
  { Value: 'parent', Description: '父母' },
  { Value: 'spouse', Description: '配偶' },
  { Value: 'child', Description: '子女' }
];

那select应该改成这样渲染选项：

<select class="col-lg-6 col-md-6 col-sm-6 col-xs-6" [(ngModel)]="emergency.ship" name="emergencyShip_{{i}}">
  <option *ngFor="let s of shipList" [value]="s.Value">{{s.Description}}</option>
</select>

4. 确保新增按钮的逻辑正确 #

你没贴新增按钮的代码，但核心是要往Emergencies数组里添加新的对象实例，触发Angular变更检测来渲染新表单：

新增按钮的HTML： #

<button (click)="addEmergency()">新增紧急联系人</button>

TS里的新增方法： #

// 先初始化数组，至少保留一个初始表单对象
Emergencies = [{ Name: '', Phone: '', ship: '' }];

addEmergency() {
  // 推送新的空对象到数组，触发*ngFor重新渲染
  this.Emergencies.push({ Name: '', Phone: '', ship: '' });
}

额外注意点 #

• 确保你的组件所在模块已经导入FormsModule，因为使用ngModel必须依赖这个模块：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // ...其他模块
    FormsModule
  ]
})
export class AppModule { }

按照这些步骤修改后，点击新增按钮应该就能正常生成新的表单区块了。

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