6

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?

DeclanMcD
  • 1,518
  • 4
  • 22
  • 41
  • In what function to you want to use it? Is it ngClick, or ngSubmit function? – dfsq Jan 07 '15 at 09:53
  • The answer to this question may help http://stackoverflow.com/questions/15022180/how-can-i-simplify-form-validation-in-angularjs. It seems that you can use $valid and $invalid on elements of a form rather than the whole form. – camden_kid Jan 07 '15 at 09:57
  • possible duplicate. see http://stackoverflow.com/a/22965461/2460773 – Nitsan Baleli Jan 07 '15 at 10:26
  • @dfsq - It is not used in any of those functions, but rather in another $scope function such as $scope.getAdditionalData – DeclanMcD Jan 07 '15 at 10:32
  • @camden_kid - Yes I can already control the submit button by using ng-disabled="myForm.$invalid" as mentioned. – DeclanMcD Jan 07 '15 at 10:33
  • You should use `$scope.myForm.$valid`. In your case you are doing something wrong, because `myForm` object will be available in the scope. Make sure you are checking correct $scope. – dfsq Jan 07 '15 at 10:59
  • @Nitsan Baleli - No I don't think it's anything like that. I am specifically referencing the ng-form attribute, not the html form tag. – DeclanMcD Jan 07 '15 at 11:19
  • @dfsq - I have already tried that. But the $scope.myForm is undefined. There is only 1 scope – DeclanMcD Jan 07 '15 at 11:34
  • Well I guess I know your problem. Can you post complete HTML with ngRepeat? – dfsq Jan 07 '15 at 12:50

1 Answers1

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

Nitsan Baleli
  • 5,393
  • 3
  • 30
  • 52
  • 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? – DeclanMcD Jan 07 '15 at 11:53
  • actually if you look at this plnkr, the function can access the myForm object from the controller: http://plnkr.co/edit/KEa5Nq3aynAETKS86YMy?p=preview – Nitsan Baleli Jan 07 '15 at 11:56
  • correct, that does work for a single ng-form but not in a ng-repeat. See the fork of your fiddle as an example. http://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? – DeclanMcD Jan 08 '15 at 09:21
  • @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. http://plnkr.co/edit/ONhN26xik2M2HcBZQa6z?p=preview – Nitsan Baleli Jan 08 '15 at 09:30