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

I would suggest you take a look at the documentation about form arrays in reactive forms — user4676340
– user4676340, Commented Jun 6, 2018 at 8:18
You can't do this via a template driven approach. You'll need to use reactive form arrays to do this. — Andrew Howard
– Andrew Howard, Commented Jun 6, 2018 at 8:23
But I didnot use ReactiveForm here. I used only ngForm. @AndrewJuniorHoward — SuUbha
– SuUbha, Commented Jun 6, 2018 at 8:23
@AndrewJuniorHoward it's possible to use a template driven form approach for that. But using the reactive forms is way easier (to me) and faster to do. — user4676340
– user4676340, Commented Jun 6, 2018 at 8:26

Khaled Ahmed · Accepted Answer · 2018-06-06 08:26:11Z

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

programoholic · Accepted Answer · 2018-06-06 09:15:24Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related