Reference angular ng-form from controller

Question

How can I reference the ng-form object from within my controller?

I have

<ng-form name="myForm">
</ng-form>

This code on the HTML page works fine

 {{myForm.$valid}}

returning true or false as the case may be.

But what I want is to check the status of the form from within a funciton in the controller, for example before posting the data or retrieving data.

I have tried

$scope.myForm.$valid

but this doesn't exist. Neither is there any reference to the myForm object in the $scope itself.

The ng-form is used within an ng-repeat, all of which is within a normal HTML form object which is why it is being used.

As I said, the myForm.$invalid is used to control the display/enabled controls within that form on the HTML page just fine.

Any ideas?

In what function to you want to use it? Is it ngClick, or ngSubmit function? — dfsq
– dfsq, Commented Jan 7, 2015 at 9:53
The answer to this question may help stackoverflow.com/questions/15022180/…. It seems that you can use $valid and $invalid on elements of a form rather than the whole form. — camden_kid
– camden_kid, Commented Jan 7, 2015 at 9:57
possible duplicate. see stackoverflow.com/a/22965461/2460773 — Nitsan Baleli
– Nitsan Baleli, Commented Jan 7, 2015 at 10:26
@dfsq - It is not used in any of those functions, but rather in another $scope function such as $scope.getAdditionalData — DeclanMcD
– DeclanMcD, Commented Jan 7, 2015 at 10:32
@camden_kid - Yes I can already control the submit button by using ng-disabled="myForm.$invalid" as mentioned. — DeclanMcD
– DeclanMcD, Commented Jan 7, 2015 at 10:33

Nitsan Baleli · Accepted Answer · 2015-01-07 11:36:20Z

2

one approach to check if a form is valid upon submitting will be to pass the myForm.$valid into the submit function:

<ng-form name="myForm" ng-submit="test(myForm.$valid, obj)">
  <input type="text" name="test" ng-model="obj.user" required>
  <input type="submit" ng-click="test(myForm.$valid, obj)" ng-disabled="!myForm.$valid">
</ng-form>

and the test function:

$scope.test = function($valid, obj) {
  if (!$valid) return;
  console.log(obj);
}

plnkr

answered Jan 7, 2015 at 11:36

Nitsan Baleli

5,4683 gold badges35 silver badges54 bronze badges

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

4 Comments

DeclanMcD Over a year ago

That looks like it will do what I want but only on a submit? Can the state (and specifically the myForm.$error object not be accessed without posting it back as shown?

Nitsan Baleli Over a year ago

actually if you look at this plnkr, the function can access the myForm object from the controller: plnkr.co/edit/KEa5Nq3aynAETKS86YMy?p=preview

DeclanMcD Over a year ago

correct, that does work for a single ng-form but not in a ng-repeat. See the fork of your fiddle as an example. plnkr.co/edit/d7WEoX0h37MziGfnJtMS?p=preview I would like to be able to access it like you have shown but in the form $scope.myForm[2] perhaps?

Nitsan Baleli Over a year ago

@DeclanMcD in this case, when ng-repeat creates a new scope for each form, you're better to pass the form to the function and printing it. plnkr.co/edit/ONhN26xik2M2HcBZQa6z?p=preview

Collectives™ on Stack Overflow

Reference angular ng-form from controller

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related