AngularJS check if form is valid in controller

Question

I need to check if a form is valid in a controller.

View:

<form novalidate=""
      name="createBusinessForm"
      ng-submit="setBusinessInformation()"
      class="css-form">
 <!-- fields -->
</form>

In my controller:

.controller(
    'BusinessCtrl',
    function ($scope, $http, $location, Business, BusinessService, 
              UserService, Photo)
    {

        if ($scope.createBusinessForm.$valid) {
            $scope.informationStatus = true;
        }

        ...

I'm getting this error:

TypeError: Cannot read property '$valid' of undefined

Did you wrap it around the setBusinessInformation function within the controller? — matsko
– matsko, Commented Nov 18, 2013 at 17:39
code too fragmented to analyze what could be wrong...create a simple demo in jsfiddle.net or plunker that replicates problem. Is form within scope of BusinessCtrl? can't tell without seeing more — charlietfl
– charlietfl, Commented Nov 18, 2013 at 17:45
@matsko: No. I need to execute this code on controller initialization. — Rober
– Rober, Commented Nov 18, 2013 at 18:53
@charlietfl: There is not much more. I remove some code in order to simplify the example. Yes, the form should be in the scope of BusinessCtrl (the controller is set on routes in app.js. I add my solution in an answer below. But, I don´t know why is not working this way. — Rober
– Rober, Commented Nov 18, 2013 at 18:55

Damsorian · Accepted Answer · 2014-11-14 13:35:34Z

111

Try this

in view:

<form name="formName" ng-submit="submitForm(formName)">
 <!-- fields -->
</form>

in controller:

$scope.submitForm = function(form){
  if(form.$valid) {
   // Code here if valid
  }
};

or

in view:

<form name="formName" ng-submit="submitForm(formName.$valid)">
  <!-- fields -->
</form>

in controller:

$scope.submitForm = function(formValid){
  if(formValid) {
    // Code here if valid
  }
};

edited Nov 14, 2014 at 13:35

answered Nov 13, 2014 at 16:28

Damsorian

1,6942 gold badges14 silver badges10 bronze badges

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

8 Comments

Fahad Mullaji Over a year ago

What if I want to validate multiple buttons in a form?

ps0604 Over a year ago

this worked for me, but why $scope.formName.$valid results in undefined?

Vaibhav Shaha Over a year ago

If you use ng-if then $scope.formName.$valid will not work and if you use ng-show then $scope.formName.$valid will work.

Nicolas Leucci Over a year ago

This should be the best answer, simple. But could you handle the form invalid ? How could you show to user what inputs are invalid ?

Damsorian Over a year ago

@ps0604 the formName.$valid can be accessed only in the template, if you want to access in the controller you need to create an object for that like $scope.forms.formName and in the template: <form name="forms.formName"> check this comment

|

Alan Dunning · Accepted Answer · 2016-03-24 13:30:56Z

29

I have updated the controller to:

.controller('BusinessCtrl',
    function ($scope, $http, $location, Business, BusinessService, UserService, Photo) {
        $scope.$watch('createBusinessForm.$valid', function(newVal) {
            //$scope.valid = newVal;
            $scope.informationStatus = true;
        });
        ...

edited Mar 24, 2016 at 13:30

Alan Dunning

1,3518 silver badges17 bronze badges

answered Nov 18, 2013 at 18:57

Rober

6,15818 gold badges62 silver badges118 bronze badges

3 Comments

Jasper Over a year ago

Also remember that - If the form is a Modal then remember to declare form name as dot notation eg: "data.theform" and access it in your controller as $scope.data.theform

cyrf Over a year ago

This does not work for me. Please show how you get 'createBusinessForm' into the controller's $scope.

ankitd Over a year ago

$scope things has gone, now a days we are using vm approach. can you create a plunker for same answer by using controller as syntax approach. I am not able to do it. It will be helpful for other as well who are looking for answer with today's context. Thanks

Biswas Khayargoli · Accepted Answer · 2018-07-04 16:13:54Z

Here is another solution

Set a hidden scope variable in your html then you can use it from your controller:

<span style="display:none" >{{ formValid = myForm.$valid}}</span>

Here is the full working example:

angular.module('App', [])
.controller('myController', function($scope) {
  $scope.userType = 'guest';
  $scope.formValid = false;
  console.info('Ctrl init, no form.');
  
  $scope.$watch('myForm', function() {
    console.info('myForm watch');
    console.log($scope.formValid);
  });
  
  $scope.isFormValid = function() {
    //test the new scope variable
    console.log('form valid?: ', $scope.formValid);
  };
});

<!doctype html>
<html ng-app="App">
<head>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
</head>
<body>

<form name="myForm" ng-controller="myController">
  userType: <input name="input" ng-model="userType" required>
  <span class="error" ng-show="myForm.input.$error.required">Required!</span><br>
  <tt>userType = {{userType}}</tt><br>
  <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br>
  <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br>
  
  
  /*-- Hidden Variable formValid to use in your controller --*/
  <span style="display:none" >{{ formValid = myForm.$valid}}</span>
  
  
  <br/>
  <button ng-click="isFormValid()">Check Valid</button>
 </form>
</body>
</html>

Oliver · Accepted Answer · 2013-11-19 10:15:26Z

4

The BusinessCtrl is initialised before the createBusinessForm's FormController. Even if you have the ngController on the form won't work the way you wanted. You can't help this (you can create your ngControllerDirective, and try to trick the priority.) this is how angularjs works.

See this plnkr for example: http://plnkr.co/edit/WYyu3raWQHkJ7XQzpDtY?p=preview

answered Nov 19, 2013 at 10:15

Oliver

4,4712 gold badges23 silver badges18 bronze badges

Comments

Todd Hale · Accepted Answer · 2023-02-24 19:04:32Z

0

I like to disable the save/submit button if the form is invalid:

<form name="ruleForm">
    <md-input-container>
        <label>Priority</span>
        <input name="description" ng-model="vm.record.description" required>
    </md-input-container>
    <md-button ng-click="vm.save()" ng-disabled="ruleForm.$invalid" class="md-primary md-raised">Save</md-button>
</form>

answered Feb 24, 2023 at 19:04

Todd Hale

5809 silver badges16 bronze badges

Collectives™ on Stack Overflow

AngularJS check if form is valid in controller

5 Answers 5

8 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

8 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related