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

Question

目前我在 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>

组件文件代码在这里

public firstResultList:any;
public secondResultList:any;
private newFirstAttribute: any = {};
private newSecondAttribute: any = {};
addSecondListRow(){
    this.newSecondAttribute.branch_text='';
    this.newSecondAttribute.initial_service='';
    this.newSecondAttribute.quarterly_charge='';
    this.newSecondAttribute.type='2';
    this.secondResultList.push(this.newSecondAttribute);

}
updateBrochurePriceHandler(formData) {
    this.http.post(CONSTANTS.baseApiUrl + 
    'Angular2_api/update_brochure_price', formData)
        .map(res => res.json())
        .subscribe((data) => {
         console.log(data);
    })
}

Answer 1

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

在您的 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>

在你的组件文件中：

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

干杯！！！

Answer 2

<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 (change)="bindInput(1, i, this)" 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 (change)="bindInput(2, i, this)" 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 (change)="bindInput(3, i, this)" 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 (change)="bindInput(4, i, this)" 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>

在component.ts中创建函数bindInput并根据第一个参数选择哪个 您将设置的属性

bindInput(whichAttribute, index, tag) {
    let value = tag.value;
    if(whichAttribute == 1) {
        this.secondResultList[index].branch_text = value;
    } else if (whichAttribute == 2) {
        this.secondResultList[index].initial_service = value;
    } else if (whichAttribute == 3) {
        this.secondResultList[index].quarterly_charge = value;
    } else if (whichAttribute == 4) {
        this.secondResultList[index].type = value;
    }
}