Angular 2 Add dynamic field in form and save data to database

Question

Currently I am working in a project on Angular 2. I have to do like this. In short, there are few fields data coming from database(row with field value 'test8'). after that if user want to add new fields and values then they have to click the "Add new row" button and save the data with the submit button. The problem with me is that I cannot bind the dynamic data given by user to component and save that in database.

template file code is as follows:

<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>

Component file code is here

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

No need to go for If else and complex logics. From your current approach only you can achieve what you want. I just did minor modifications in your code snippet and able to receive data as you need :

In Your HTML file :

  <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>

In your Component file :

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

    this.secondResultList.push(obj);
}

// Method gets called when form is submitted

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

this is the result i am able to get

{
   [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: ""
}

Cheers !!!

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>

and in component.ts make the function bindInput and based the first parameter choose which attribute you will set

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;
    }
}