Using Multiple Form in One HTML page,and get object of both form in angularjs

Question

My html code is

<div>
<div>
<form name="form 1" ng-submit="submitForm1()">
<input type="text" required name="text1">
</form>
</div
<div>
<form name="form 2" ng-submit="submitForm2()">
<input type="text" required name="text2">
</form>
</div>
</div>

and in my controller i am accessing the form using scope.controller looks like

$scope.submitFrom1 = function(){
  console.log(form1);
}

$scope.submitFrom2 = function(){
  console.log(form2);
}

but in result first form will give object and second form is returning undefined I am getting why this is happening.

Paulson Peter · Accepted Answer · 2016-11-21 06:58:02Z

1

You have to use ngModel for the fields inside each form to access data. https://docs.angularjs.org/api/ng/directive/ngModel

<form name="firstForm" ng-submit="submitForm1()">
    <input type="text" required name="text1" ng-model="firstForm.text1>
</form>

<form name="secondForm" ng-submit="submitForm2()">
    <input type="text" required name="text1" ng-model="secondForm.text1>
</form>

In controller

$scope.firstForm.text1 to access the data from first form individually.
$scope.secondForm.text1 to access the data from second form individually.

To get full form object just use.

$scope.firstForm;
$scope.secondForm;

edited Nov 21, 2016 at 6:58

answered Nov 18, 2016 at 11:21

Paulson Peter

5744 silver badges12 bronze badges

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

1 Comment

ajay dixit Over a year ago

i am getting the firstForm but secondForm getting is undefined

georgeawg · Accepted Answer · 2016-11-18 21:58:01Z

0

Remove the spaces from the form names.

<!-- remove spaces from form name
<form name="form 1" ng-submit="submitForm1()">
-->
<form name="form1" ng-submit="submitForm1()">
<input type="text" required name="text1" ng-model="a">
</form>
<!-- remove spaces from form name
<form name="form 2" ng-submit="submitForm2()">
-->
<form name="form2" ng-submit="submitForm2()">
<input type="text" required name="text2" ng-model="b">
</form>

It was causing $parse errors.

The DEMO on JSFiddle

answered Nov 18, 2016 at 21:58

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Collectives™ on Stack Overflow

Using Multiple Form in One HTML page,and get object of both form in angularjs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related