Not able to access form from controller in AngularJS

Question

I'm trying to check the $valid property of the form in my view:

  <!DOCTYPE html>
<html ng-app="app">

  <head>
    <meta charset="utf-8" />
    <title>Form</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
    <script src="app.js"></script>
    <script src="controller.js"></script>
  </head>

  <body ng-controller="FormController as $ctrl">
    <form name="$ctrl.myForm">
      <div>
        <input type="text" name="myName" ng-model="$ctrl.name">
      </div>
    </form>
  </body> 

</html>

My Controller:

(function(){
    angular.module('app').controller('FormController', formController);

    function formController(){
        var vm = this;
        vm.name = 'John';
        console.log(vm);
    }
})();

My App:

(function(){
    var app = angular.module('app',[]);
})();

Not sure what the problem is but I keep getting error below:

I just tried to print the 'vm' to the console, and I got the below:

How do I access 'myForm' property form the 'vm'?

I can't verify at the moment, but I believe you don't need the $ctrl. before the form name in your html. It should just be <form name="myForm"> and then you can access it the way you are attempting to. — Tyler
– Tyler, Commented Feb 19, 2018 at 20:23
@georgeawg How do you check if the form is valid or not in the controller? I tried with 'vm.myForm.$valid' and got error saying that "can not read property '$valid' of undefined" — Tuan Le
– Tuan Le, Commented Feb 19, 2018 at 21:34

georgeawg · Accepted Answer · 2018-02-20 16:51:52Z

How do you check if the form is valid or not in the controller? I tried with vm.myForm.$valid and got error saying that "can not read property '$valid' of undefined".

The form controller needs a digest cycle to process the name=$ctrl.myForm attribute.

Use the $doCheck Life-Cycle Hook to wait:

function formController($timeout){
    var vm = this;
    var oldMyForm = false;
    this.$doCheck = function() {
      if (!oldMyForm && vm.myForm) {
        console.log("$valid="+vm.myForm.$valid);
      }
      oldMyForm = vm.myForm;
    };
}

From the Docs:

Life-cycle hooks

Directive controllers can provide the following methods that are called by AngularJS at points in the life-cycle of the directive:

$doCheck() - Called on each turn of the digest cycle. Provides an opportunity to detect and act on changes. Any actions that you wish to take in response to the changes that you detect must be invoked from this hook; implementing this has no effect on when $onChanges is called. For example, this hook could be useful if you wish to perform a deep equality check, or to check a Date object, changes to which would not be detected by AngularJS's change detector and thus not trigger $onChanges. This hook is invoked with no arguments; if detecting changes, you must store the previous value(s) for comparison to the current values.

— AngularJS Comprehensive Directive API Reference - Life-Cycle Hooks

The DEMO on PLNKR

I used the $timeout instead of $doCheck function and it worked too:
$timeout(function(){ 
    console.log(vm.myForm.$error); 
});

Use of $timeout is a code smell, a symptom of a larger problem.

In general, controllers should wait for the user to submit forms. Or the controller should react to user input with the ng-change directive. In both cases the form controller will have validated the inputs before the framework invokes either function. Validity should only be checked after user input.

Thanks, georgeawg! Now I understand that we need to wait for the digest cycle to process before being able to check the form. I used the $timeout instead of $doCheck function and it worked too: $timeout(function(){ console.log(vm.myForm.$error); });

Collectives™ on Stack Overflow

Not able to access form from controller in AngularJS

1 Answer 1

Life-cycle hooks

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Life-cycle hooks

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related