submitting form with dynamic field in angular js

Question

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

harishr · Accepted Answer · 2014-10-13 12:50:32Z

2

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

answered Oct 13, 2014 at 12:50

harishr

18.1k9 gold badges84 silver badges131 bronze badges

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

3 Comments

Sariban D'Cl Over a year ago

I'll check and let you know. :)

Sariban D'Cl Over a year ago

when I click on working hours column it gives me this error in console TypeError: Cannot read property 'hour' of undefined

harishr Over a year ago

just do ng-init="timeSheetTest[$index] = {}"

Collectives™ on Stack Overflow

submitting form with dynamic field in angular js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related