How to post dynamic form data in angularjs? - angularjs

Question

Am new to angularjs, i need to http post the dynamic form data to an API.
app.js
$scope.contacts = [
{ 'cpName':'',
'cpDesignation':'' ,
'cpDept': '',
'cpEmail': '',
'cpMobile':''
}
];
$scope.addRow = function(){
$scope.contacts.push({ 'cpName':$scope.cpName, 'cpDesignation': $scope.cpDesignation, 'cpDept':$scope.cpDept, 'cpEmail':$scope.cpEmail, 'cpMobile':$scope.cpMobile});
$scope.cpName='';
$scope.cpDesignation='';
$scope.cpDept='';
$scope.cpEmail='';
$scope.cpMobile='';
};
contact form
<form name="myform" role="form" ng-submit="addRow()">
<div class="row" ng-class="{true: 'error'}[submitted && myform.cpEmail.$invalid]">
<div class="form-group">
<label class="col-md-2 control-label">CONTACT PERSON</label>
<div class="col-md-4">
<input type="text" class="form-control" name="cpName"
ng-model="cpName" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">DESIGNATION</label>
<div class="col-md-4">
<input type="text" class="form-control" name="cpDesignation"
ng-model="cpDesignation" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">DEPARTMENT</label>
<div class="col-md-4">
<input type="text" class="form-control" name="cpDept"
ng-model="cpDept" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">EMAIL*</label>
<div class="col-md-4">
<input type="email" class="form-control" name="cpEmail"
ng-model="cpEmail" />
<span style="color:red" ng-show="myform.cpEmail.$dirty && myform.cpEmail.$invalid">
<span ng-show="myform.cpEmail.$error.required">Email is required.</span>
<span ng-show="myform.cpEmail.$error.email">Invalid email address.</span>
</span>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">MOBILE</label>
<div class="col-md-4">
<input type="number" class="form-control" name="cpMobile"
ng-model="cpMobile" />
</div>
</div>
<div class="form-group">
<div style="padding-left:110px">
<input type="submit" value="Add" class="btn btn-primary"/>
</div>
</div>
</div>
</form>
<table>
<tr>
<th>CONTACT PERSON</th>
<th>DESIGNATION</th>
<th>DEPARTMENT</th>
<th>EMAIL</th>
<th>Mobile</th>
</tr>
<tr ng-repeat="contact in contacts">
<td>{{contact.cpName}} </td>
<td>{{contact.cpDesignation}} </td>
<td>{{contact.cpDept}} </td>
<td>{{contact.cpEmail}} </td>
<td>{{contact.cpMobile}} </td>
</tr>
</table>
I know how to handle a single form data but not dynamic data.. Any help will be appreciated.
Thank you

Answer 1

Use ng-repeat over the rows.. So, in starting your $scope.contacts has 1 row and hence it will show one row in html.. Now push new object to $scope.contacts and then 2 rows will come in UI.
So, now just by pushing empty object to $scope.contacts you can get any number of rows.
Don't worry about the data every row will maintain its own data in the $scope.contacts array .. and at last just send this object to server. So, now you have dynamic rows.

Answer 2

Define your form like this
<div class="row" ng-repeat="contact in contacts">
<div class="form-group">
<label class="col-md-2 control-label">CONTACT PERSON</label>
<div class="col-md-4">
<input type="text" class="form-control" name="cpName"
ng-model="contact.cpName" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">DESIGNATION</label>
<div class="col-md-4">
<input type="text" class="form-control" name="cpDesignation"
ng-model="contact.cpDesignation" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">DEPARTMENT</label>
<div class="col-md-4">
<input type="text" class="form-control" name="cpDept"
ng-model="contact.cpDept" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">EMAIL*</label>
<div class="col-md-4">
<input type="email" class="form-control" name="cpEmail"
ng-model="contact.cpEmail" />
<span style="color:red" ng-show="myform.cpEmail.$dirty && myform.cpEmail.$invalid">
<span ng-show="myform.cpEmail.$error.required">Email is required.</span>
<span ng-show="myform.cpEmail.$error.email">Invalid email address.</span>
</span>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">MOBILE</label>
<div class="col-md-4">
<input type="number" class="form-control" name="cpMobile"
ng-model="contact.cpMobile" />
</div>
</div>
<div class="form-group">
<div style="padding-left:110px">
<input type="submit" value="Add" class="btn btn-primary"/>
</div>
</div>
</div>
<input type="button" value="Add" class="btn btn-primary" ng-click="upload()"/>
<table>
<tr>
<th>CONTACT PERSON</th>
<th>DESIGNATION</th>
<th>DEPARTMENT</th>
<th>EMAIL</th>
<th>Mobile</th>
</tr>
<tr ng-repeat="contact in contacts">
<td>{{contact.cpName}} </td>
<td>{{contact.cpDesignation}} </td>
<td>{{contact.cpDept}} </td>
<td>{{contact.cpEmail}} </td>
<td>{{contact.cpMobile}} </td>
</tr>
</table>
Here's your controller code
$scope.contacts = [{}];
$scope.upload = function(){
//api call
}
$scope.addRow = function(){
$scope.contacts.push({});
};