Angularjs form in controller always undefined

Question

In my project I use ui-view and with following structure (deleted unnecessary code):

<main class="content">
    <div class="inner" ng-controller="OrderPageController">
        <div ui-view="main-info"></div>
        <div ui-view="comments"></div>
        <div ui-view="bids-list"></div>
        <div ui-view="add-bid"></div>
    </div>
</main>

And in add-bid view:

<form name="newbidform" novalidate ng-submit="postNewBid(newbidform);">
   <input type="text" ng-model="newbid.bid" required>
   <input type="submit">
</form>

So, then I submit form I try to check if all of required inputs are valid:

$scope.postNewBid = function(form) {

console.log(form) // $valid and $invalid always undefined
console.log($scope.newbidform) // always undefined

        // check validity before send
        if (!form.$valid) {
            angular.forEach(form.$error, function (field) {
                angular.forEach(field, function(errorField){
                    errorField.$setTouched();
                })
            });
            $scope.failedSubmit = true;
            return false;
        } else {
            $scope.failedSubmit = false;
        } 
// other things if form is valid

So, the problem the form is always undefined (at all or $valid/$invalid attr). I tried to use formName as parameter in function, as $scope.formName variable (always undefined), and define controller twice, in second time on form:

<form name="newbidform" novalidate ng-submit="postNewBid();" ng-controller="OrderPageController">

Actually, it works, but when I'm trying to access other variables in controller - I can't. So, is there a way to get a form state in controller in AngularJs? Thanks

It would be significantly easier to help you if you could please create a working plunker. Thanks. — icfantv
– icfantv, Commented Sep 28, 2015 at 23:51
How did plunker help you, tell me please :) I have the same situation, sometimes $valid/$invalid is ok and sometimes it's undefined. I can't find out when this situation occurs. — Odinn
– Odinn, Commented Sep 8, 2016 at 14:54

Nicolas2bert · Accepted Answer · 2015-09-28 23:54:03Z

1

newbid is the variable you want to get, right ?

Try :

<form name="newbidform" novalidate ng-submit="postNewBid(newbid);">

answered Sep 28, 2015 at 23:54

Nicolas2bert

1,1527 silver badges10 bronze badges

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

1 Comment

frsv Over a year ago

newbidform is a name of form and a parameter for postNewBid() function, and yes, I try to get form $valid/$invalid state

charlietfl · Accepted Answer · 2015-09-29 00:01:19Z

1

It sounds like your form is nested in child scope such as inside an ng-include or ng-if in which case since the form object doesn't exist in the parent scope the parent won't see it when angular creates it in the child.

You can fix it by simply creating an empty object in the parent controller and that object will be inherited by child scopes. Since the object exists now, a new object won;t need to be created and all the properties will get added to the reference in child scope.

$scope.newbidform ={};
$scope.postNewBid = function(form) {...

answered Sep 29, 2015 at 0:01

charlietfl

172k14 gold badges125 silver badges154 bronze badges

5 Comments

frsv Over a year ago

I already tried to do it, but didn't succeed. I have only one controller in this views (OrderpageController) and so I've defined $scope.newbidform ={}; , but on submit I got the same - form in function has undefined $valid/$invalid, $scope.newbidfrom staying {}

charlietfl Over a year ago

A demo that replicates this would help

frsv Over a year ago

It's really strange, but in plunker parameter in function works correctly -plnkr.co/edit/byV32EEXTugHRp5vDvuE?p=preview

charlietfl Over a year ago

hard to help if can't replicate. Here's helpful trick in view <pre>{{newbidform|json}}</pre> .. can see the form object when issues arise

frsv Over a year ago

Thanks for help, plunker helped me to understand the problem :) The problem was in my custom directive which is to reconcile two values when entering.

Collectives™ on Stack Overflow

Angularjs form in controller always undefined

2 Answers 2

1 Comment

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Related