如何在angular 2中创建动态窗体

我正在使用angular2，我需要创建一个动态表单，问题是在发送表单时只捕获最后一个输入元素。我知道我需要将此元素转换为安排，但我没有成功

从'@angular/core'导入{Component，OnInit}；
从'@angular/Router'导入{Router，ActivatedRoute，Params}；
从“./informe.service”导入{InformeService}；
从'@angular/forms'导入{FormGroup，FormBuilder，Validators}；
声明var jQuery:any；
声明var$：任何；
@组成部分({
选择器：“应用程序信息”，
templateUrl:'./informe.component.html'，
样式URL:['./informe.component.css']，
提供者：[InformeService]
})
导出类InformeComponent实现OnInit{
objGeneralIndex:编号=1；
objGeneral=[{id:1，文本：'}]；
objEspecificos=[{id:1，文本：'}]；
OBJESPECICOSINDEX：编号=1；
forminfo:FormGroup；
建造师(
专用路由：激活的路由，
专用路由器：路由器，
私人服务：信息服务，
私人fb:FormBuilder
){this.crearcontrolles（）；}
ngOnInit（）{$（“#infoBasic”）.show（500）；$（“#objGeneral”）.hide（500）；$（“#objEspec”）.hide（500）；}
showInfoBasic（）{
$（“#infoBasic”）.show（500）；$（“#objGeneral”）.hide（500）；$（“#objEspec”）.hide（500）；
}
showObjGral（）{
$（“#infoBasic”）.hide（500）；$（“#objGeneral”）.show（500）；$（“#objEspec”）.hide（500）；
}
showObjEspec（）{
$（“#infoBasic”）.hide（500）；$（“#objGeneral”）.hide（500）；$（“#objEspec”）.show（500）；
}
crearControles（）{
this.forminfo=this.fb.group({
Titolonforme:“，
fechaInforme:“”，
objetivoGeneral:[{id:1，文本：'}]，
objEspec：数组
})
}
guardarInforme（）{
this.service.addinfo（this.forminfo.value）
.订阅(
rt=>console.log（rt），
er=>console.log（er），
（）=>console.log（'Terminado'）
);
}
addObjetivo（）：void{
this.objGeneralIndex++；
this.objGeneral.push（{id:this.objGeneralIndex，文本：“}）；
}
德洛比格拉尔（obj）：无效{
for（var i=0；i

/*DivTable.com*/
.divTable{
显示：表格；
宽度：100%；
}
.divTableRow{
显示：表格行；
}
.表格标题{
背景色：#EEE；
显示：表头组；
}
.divTableCell、.divTableHead{
文本对齐：居中；
边框：1px实心#999999；
显示：表格单元格；
填充：3x10px；
}
.表格标题{
背景色：#EEE；
显示：表头组；
字体大小：粗体；
}
.桌脚{
背景色：#EEE；
显示：表尾组；
字体大小：粗体；
}
.表格正文{
显示：表格行组；
}
按钮#addObjetivo，#addObjetivoEspec{
浮动：对；
利润上限：-60px；
}
按钮#btn_已发送{
浮动：对；
利润上限：-81px；
保证金权利：12%；
}
#控制按钮{
浮动：对；
利润上限：-50px；
}
#德尔塞尔{
宽度：5%；
}
#身体信息{
宽度：90%；
左边距：自动；
右边距：自动；
}
#面板信息{
高度：480px；
}
#溢流阀，#溢流阀规格{
高度：300px；
溢出：自动；
}

处方库-信息消化
1.
2.
3.

环境信息
Básica信息

提图洛·德·因弗梅
费查：
一般目标

阿格雷加菲拉酒店
#
蓬托斯
{{（i+1）}
Eliminar
特别是安格尔目标

阿格雷加菲拉酒店
#
蓬托斯
{{（i+1）}
Eliminar

我想您应该为

objetivoGeneral

和

objEspec

字段使用

FormArray

类：

this.formInforme = this.fb.group({
  tituloInforme: '',
  fechaInforme: '',
  objetivoGeneral: this.fb.array([this.initObjetivo()]),
  objEspec: this.fb.array([this.initObjEspec()])
})

initObjetivo() {
  return this.fb.group({ id: this.objGeneralIndex++, text: "" });
}

addObjetivo(): void {
  const objetivoArray = <FormArray>this.formInforme.controls['objetivoGeneral'];
  const newObjetivo = this.initObjetivo();

  objetivoArray.push(newObjetivo);
}
delObjGral(idx: number): void {
  const objetivoArray = <FormArray>this.formInforme.controls['objetivoGeneral'];
  objetivoArray.removeAt(idx);
} 

initObjEspec() {
  return this.fb.group({ id: this.objEspecificosIndex++, text: "" });
}

addObjectivoEspecifico(): void {
  const objEspecArray = <FormArray>this.formInforme.controls['objEspec'];
  const newobjEspec = this.initObjEspec();

  objEspecArray.push(newobjEspec);
}

delObjEspecifico(idx: number): void {
  const objEspecArray = <FormArray>this.formInforme.controls['objEspec'];
  objEspecArray.removeAt(idx);
}

---

p.S.文档中的

id

必须是唯一的。使用

class

而不是

id=“tbl_objGeneral”

您应该使用

ngForm

指令。将

ngForm

分配给

#参考

，然后用于提交

（ngSubmit）=“submitFn（reference.value）”

。这将为您提供表单中的所有模型。另外，确保在每个表单输入中都有

name

属性和

ngModel

。

<div id="overflowGral" formArrayName="objetivoGeneral">
  <div class="divTable">
     <div class="divTableBody">
        <div class="divTableRow">
          <div class="divTableCell">#</div>
          <div class="divTableCell">Puntos</div>
         </div>
        <div [formGroupName]="i" *ngFor="let obj of formInforme.controls.objetivoGeneral.controls; let i=index" id="tbl_objGeneral" class="divTableRow">
          <div class="divTableCell">{{ (i+1) }}</div>
          <div class="divTableCell">
            <input id="objetivoGeneral" formControlName="text" class="form-control" type="text" placeholder="Objetivo General">
          </div>
          <div class="divTableCell" id="dellCell">
            <button (click)="delObjGral(i)" type="button" class="btn btn-danger">Eliminar</button>
          </div>
       </div>
     </div>
  </div>
</div>