Angular 2在表单中添加动态字段并将数据保存到数据库

目前我在Angular 2的一个项目中工作。我必须这样做。 简而言之，很少有字段数据来自数据库（字段值为“test8”的行）。之后，如果用户想要添加新字段和值，则必须单击“添加新行”按钮并使用“提交”按钮保存数据。 我的问题是，我无法将用户提供的动态数据绑定到组件并将其保存在数据库中

模板文件代码如下：

<form class="form-inline" role="form" id="SeasonAddForm" #userlogin = "ngForm"  (ngSubmit)="updateBrochurePriceHandler()">
    <div class="secondListDiv">
        <div class="row " *ngFor="let sl of secondResultList, let index = index;">
            <div class="col-xs-4">
                <input id="branch_text_second{{index}}" name="saveData2-{{index}}-branch_text" class="form-control rt no-radius" type="text" value="{{sl.branch_text}}" [(ngModel)]="sl.branch_text" placeholder="">
            </div>
            <div class="col-xs-4">
                <input id="initial_service_second{{index}}" name="saveData2-{{index}}-initial_service" class="form-control rt no-radius" type="text" value="{{sl.initial_service}}" [(ngModel)]="sl.initial_service" placeholder="">
            </div>
            <div class="col-xs-4">
                <input id="quarterly_charge_second{{index}}" name="saveData2-{{index}}-quarterly_charge" class="form-control rt no-radius" type="text" value="{{sl.quarterly_charge}}" [(ngModel)]="sl.quarterly_charge" placeholder="">
            </div>
            <input id="type{{index}}" name="saveData2-{{index}}-type" class="form-control rt no-radius" type="hidden" value="{{sl.type}}" [(ngModel)]="sl.type" placeholder="">
        </div>
    </div>
    <div class="row">
        <div class="col-xs-4">
            <input type="button" value="Add New Row" (click)="addSecondListRow()" class="frm_sub" id='addNewSecondDiv' >
        </div>
    </div>
</form>

---

无需使用If-else和复杂逻辑。从你目前的方法中，只有你能实现你想要的。我只是对您的代码片段做了一些小修改，并能够根据需要接收数据：

在HTML文件中：

  <form class="form-inline" role="form" id="SeasonAddForm" #userlogin="ngForm" (ngSubmit)="updateBrochurePriceHandler(userlogin.value)">
<div class="secondListDiv">
    <div class="row " *ngFor="let sl of secondResultList, let index = index;">
        <div class="col-xs-4">
            <input id="branch_text_second{{index}}" name="saveData2-{{index}}-branch_text" class="form-control rt no-radius" type="text" value="{{sl.branch_text}}" [(ngModel)]="sl.branch_text" placeholder="">
        </div>
        <div class="col-xs-4">
            <input id="initial_service_second{{index}}" name="saveData2-{{index}}-initial_service" class="form-control rt no-radius" type="text" value="{{sl.initial_service}}" [(ngModel)]="sl.initial_service" placeholder="">
        </div>
        <div class="col-xs-4">
            <input id="quarterly_charge_second{{index}}" name="saveData2-{{index}}-quarterly_charge" class="form-control rt no-radius" type="text" value="{{sl.quarterly_charge}}" [(ngModel)]="sl.quarterly_charge" placeholder="">
        </div>
        <input id="type{{index}}" name="saveData2-{{index}}-type" class="form-control rt no-radius" type="hidden" value="{{sl.type}}" [(ngModel)]="sl.type" placeholder="">
    </div>
</div>
<div class="row">
    <div class="col-xs-4">
        <input type="button" value="Add New Row" (click)="addSecondListRow()" class="frm_sub" id='addNewSecondDiv'>
        <input type="submit" value="submit" class="frm_sub" id='addNewSecondDiv'>
    </div>
</div>

//方法在提交表单时被调用

public updateBrochurePriceHandler(formData) {
     console.log('update broucher ',formData);  
}

这就是我能得到的结果

{
   [functions]: ,
   __proto__: { },
   saveData2-0-branch_text: "A",
   saveData2-0-initial_service: "b",
   saveData2-0-quarterly_charge: "c",
   saveData2-0-type: "tyed",
   saveData2-1-branch_text: "new valu1e",
   saveData2-1-initial_service: "new value 2",
   saveData2-1-quarterly_charge: "new value 3",
   saveData2-1-type: "",
   saveData2-2-branch_text: "new value 4",
   saveData2-2-initial_service: "new value 5",
   saveData2-2-quarterly_charge: "new value 6",
   saveData2-2-type: ""
}

---

干杯

我建议您看一看关于您不能通过模板驱动方法实现这一点的文档。您需要使用反应式表单数组来完成此操作，但我在这里没有使用反应式表单。我只用了ngForm@AndrewJuniorHowardI将尝试反应形式@trichetriche@AndrewJuniorHoward可以使用模板驱动的表单方法来实现这一点。但是使用反应式表单更容易（对我来说）也更快。谢谢你的回复。我会试试这个方法。

  <form class="form-inline" role="form" id="SeasonAddForm" #userlogin="ngForm" (ngSubmit)="updateBrochurePriceHandler(userlogin.value)">
<div class="secondListDiv">
    <div class="row " *ngFor="let sl of secondResultList, let index = index;">
        <div class="col-xs-4">
            <input id="branch_text_second{{index}}" name="saveData2-{{index}}-branch_text" class="form-control rt no-radius" type="text" value="{{sl.branch_text}}" [(ngModel)]="sl.branch_text" placeholder="">
        </div>
        <div class="col-xs-4">
            <input id="initial_service_second{{index}}" name="saveData2-{{index}}-initial_service" class="form-control rt no-radius" type="text" value="{{sl.initial_service}}" [(ngModel)]="sl.initial_service" placeholder="">
        </div>
        <div class="col-xs-4">
            <input id="quarterly_charge_second{{index}}" name="saveData2-{{index}}-quarterly_charge" class="form-control rt no-radius" type="text" value="{{sl.quarterly_charge}}" [(ngModel)]="sl.quarterly_charge" placeholder="">
        </div>
        <input id="type{{index}}" name="saveData2-{{index}}-type" class="form-control rt no-radius" type="hidden" value="{{sl.type}}" [(ngModel)]="sl.type" placeholder="">
    </div>
</div>
<div class="row">
    <div class="col-xs-4">
        <input type="button" value="Add New Row" (click)="addSecondListRow()" class="frm_sub" id='addNewSecondDiv'>
        <input type="submit" value="submit" class="frm_sub" id='addNewSecondDiv'>
    </div>
</div>

//Method to add new row
public addSecondListRow(){
    let obj ={
        branch_text:"", initial_service:"", quarterly_charge:'',type:''
    };

    this.secondResultList.push(obj);
}

public updateBrochurePriceHandler(formData) {
     console.log('update broucher ',formData);  
}

{
   [functions]: ,
   __proto__: { },
   saveData2-0-branch_text: "A",
   saveData2-0-initial_service: "b",
   saveData2-0-quarterly_charge: "c",
   saveData2-0-type: "tyed",
   saveData2-1-branch_text: "new valu1e",
   saveData2-1-initial_service: "new value 2",
   saveData2-1-quarterly_charge: "new value 3",
   saveData2-1-type: "",
   saveData2-2-branch_text: "new value 4",
   saveData2-2-initial_service: "new value 5",
   saveData2-2-quarterly_charge: "new value 6",
   saveData2-2-type: ""
}