CODEWITHSUNDEEP
htmlangularjsformsangularjs-ng-repeat
Sariban D'Cl
Sariban D'Cl

Reputation: 2227

submitting form with dynamic field in angular js

Functionality: when I do add resource in form A. The resource is displayed into form B. Then I need to submit the form B.

I am not able to submit it. Main reason is : all the fields which is shown in form B is in loop. So I am unable to give specific name for each field.

enter image description here

HTML Codes of form B

<form id="attendanceSheet" name="attendanceSheet" ng-submit="fillupAttendanceSheet(attendanceSheet.$valid)" >                   
<table ng-table="tableParams" class="table">
    <tr ng-repeat="resource in resources">
        <td data-title="'Billable Resource'" style="text-align:center"><b>{{resource.resource_name}}</b></td>                               
        <td data-title="'Working Hours'" style="text-align:center"><input type="number" style="width: 55px;" min="0" max="8" ng-model="timeSheetTest.hour" value="8" required></td>
        <td data-title="'Working Hours'" style="text-align:center"><input type="number" style="width: 55px;" ng-model="timeSheetTest.nonhour" min="0" max="8" required></td>
    </tr>
</table>
<div class="span2">
    <button name="loginBtn" type="submit" class="btn" type="submit">Submit Sheet</button>
</div>
</form>

controller.js codes of form B

var addTimeSheet = function(timeSheetTest) {
console.log(timeSheetTest);  // here I should get the form values
}

$scope.fillupAttendanceSheet = function(isFormValid) {
    if(isFormValid){
        addTimeSheet($scope.timeSheetTest);
}

Upvotes: 0

Views: 394

Answers (1)

harishr
harishr

Reputation: 18065

use $index to create new field for each row timeSheetTest[$index].hour

    <input type="number" style="width: 55px;" min="0" max="8" ng-model="timeSheetTest[$index].hour" value="8" required>

this way you get array of objects...

Upvotes: 2

Related Questions