Build table from angular form data

Question

So I am trying to build a table that takes the form data entered and is stored on the client and pushes each input property into a group to create an object. From there, the table is build using ng-repeat. Code started is below, but nothing is happening. Can anyone assist?

                <form class="addClaim" ng-submit="submitClaim(claimInfo)">
                    <div class="form-group">
                        <label for="beneSelect">Select your benefit</label>
                        <select class="form-control" id="beneSelect" >
                            <option ng-repeat="descr in claim.claimBenes" data-ng-model="claimInfo.providerName">{{ descr.descr }}</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="start">Date of Service</label>
                        <div>
                            <input type="text" class="form-control" id="start" placeholder="--/--/----" data-ng-model="claimInfo.fromDate" style="width: 240px;">
                            <span>To</span>
                            <input type="text" class="form-control" id="end" placeholder="--/--/---- (optional)" data-ng-model="claimInfo.toDate" style="width: 240px;">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="providerName">Provider Name</label>
                        <input type="text" class="form-control" id="providerName" data-ng-model="claimInfo.provider">
                    </div>
                    <div class="form-group">
                        <label for="forWhom">For Whom</label>
                        <input type="text" class="form-control" id="forWhom" data-ng-model="claimInfo.who">
                    </div>
                    <div class="form-group" ng-show="claimInfo.benefCode == 'HCFSA'">
                        <label for="age">Age</label>
                        <input type="text" class="form-control" id="age" data-ng-model="claimInfo.who">
                    </div>                    

                    <div class="form-group">
                        <label for="claimAmount">Amount</label>
                        <input type="text" class="form-control" id="claimAmount" data-ng-model="claimInfo.amount">
                    </div>
                    <div class="form-group">
                        <label for="claimComment">Comments</label>
                        <textarea class="form-control" rows="5" id="claimComment" data-ng-model="claimInfo.comments"></textarea>                        
                    </div>
                    <div class="form-group">
                        <label class="control-label"></label>
                        <div>
                            <input type="button" class="btn btn-primary" ng-click="saveClaim()" value="add claim" style="float: right;">
                        </div>
                    </div>
                </form>

The table:

<div class="claimedTable" style="background-color: #ffffff; color: black;">
    <table class="table">
        <thead>
            <tr>
                <th>service date</th>
                <th>provider</th>
                <th>amount</th>
                <th>edit</th>
                <th>delete</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in claimSubmit">
                <td>{{ claimInfo.fromDate }}</td>
                <td>{{ claimInfo.provider }}</td>
                <td>{{ claimInfo.amount }}</td>
                <td><a href="#"><i class="fa fa-pencil-square-o"></i></a></td>
                <td><a href="#"><i class="fa fa-trash-o"></i></a></td>            
            </tr>
        </tbody>
    </table>
</div>

And controller:

$scope.claim = [];

claimsService.getClaim().then(function (results) {

    $scope.claim = results.data;

});

// submit all claim objects entered
$scope.claimsSubmit = [];

$scope.claimInfo = {
    id: "",
    benefitId: "",
    isSecIns: "",
    isNoResId: "",
    expenseTypeId: "",
    fromDate: "",
    toDate: "",
    provider: "",
    who: "",
    depId: "",
    age: "",   
    amount: "",
    comments: "",
    isOffset: ""
};

$scope.saveClaim = function() {
    $scope.claimsSubmit.push($scope.claimInfo);
    //clears scope so form is empty
    $scope.claimInfo = {};
}

When I enter data into the fields and click submit, nothing ever leaves nor does it post to the table. The reason I want as an object versus an array is because the table may have multiple line items depending on how many times the form is field out and submitted.

Seems somewhere simple I am going wrong, but cannot figure where. Any help please?

Thanks much.

check your typo mismatches ...works with modifications using ng-submit here plnkr.co/edit/ZMOqLs5rPx9GFwrmUDtj?p=preview — charlietfl
– charlietfl, Commented Oct 13, 2015 at 22:47
@charlietfl - So based on that plunker, I am trying to figure how I can keep this persisted if the browser accidentally refreshes. What I want to do is save each one ass an object like you have shown, but then in my html, I will add a button with a function that will then push the data as an array of objects to an API. Is that possible? — Mark
– Mark, Commented Oct 14, 2015 at 21:26

buzzsaw · Accepted Answer · 2015-10-13 23:09:18Z

1

You have a few issues in your code. Here it is cleaned up a bit...

HTML

<form class="addClaim"> // ng-submit not needed in form tag

ng-repeat bindings should be item. not claimsSubmit.

<tr ng-repeat="item in claimsSubmit">
  <td>{{ item.fromDate }}</td>
  <td>{{ item.provider }}</td>
  <td>{{ item.amount }}</td>
  <td><a href="#"><i class="fa fa-pencil-square-o"></i></a></td>
  <td><a href="#"><i class="fa fa-trash-o"></i></a></td>            
</tr>

Controller

$scope.claim = []; // This can be removed.

claimsService.getClaim().then(function (results) {
    $scope.claim = results.data;
});

// submit all claim objects entered
$scope.claimsSubmit = [];
$scope.claimInfo = {}; // This just needs to create an object.

$scope.saveClaim = function() {
    $scope.claimsSubmit.push($scope.claimInfo);
    //clears scope so form is empty
    $scope.claimInfo = {};
}

This should be enough to get the form populating the table for you. There is obviously form data missing from the table but it will get you going in the right direction.

answered Oct 13, 2015 at 23:09

buzzsaw

1,4961 gold badge10 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Mark Over a year ago

how I can keep this persisted if the browser accidentally refreshes. What I want to do is save each one ass an object like you have shown, but then in my html, I will add a button with a function that will then push the data as an array of objects to an API. Is that possible?

buzzsaw Over a year ago

You can persist the data in the browser localStorage. Just create a keyup or blur event listener that writes the table object as a JSON string to the storage. When the page loads, you can check for its existence and populate the table object with the data found there if it does exist. On form submit, you can delete the storage value.

charlietfl Over a year ago

i disagree about using button event instead of ng-submit.... lets you catch keyboard submittal which is more user friendly

buzzsaw Over a year ago

@charlietfl Agreed. I didn't want to change too much of this code though. Just wanted to get it up and running for this question. There are quite a few things that should be updated in it.

charlietfl Over a year ago

$http.post( url, $scope.claimInfo) should do it...use callback to push data to array ... oh and use angular.copy so you don't keep pushing the same object

|

Collectives™ on Stack Overflow

Build table from angular form data

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related