Best IT Recipes

AngularJS checks if form valid in controller

I need to check if the form is valid in the 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 get this error:

 TypeError: Cannot read property '$valid' of undefined
+80
angularjs
Nov 18 '13 at 17:32
source share
4 answers

I 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; }); ...
+29
Nov 18 '13 at 18:57
source share

try it

in sight:

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

in the controller:

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

or

in sight:

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

in the controller:

 $scope.submitForm = function(formValid){ if(formValid) { // Code here if valid } };
+94
Nov 13 '14 at 16:28
source share

Here is another solution

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

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

Here is a complete 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:hidden" >{{ formValid = myForm.$valid}}</span> <br/> <button ng-click="isFormValid()">Check Valid</button> </form> </body> </html>
+12
02 Oct '15 at 5:18
source share

BusinessCtrl initialized before createBusinessForm FormController . Even if your ngController in the form will not work the way you wanted. You cannot help this (you can create your ngControllerDirective and try to trick priority.) This is how angularjs works.

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

+2
Nov 19 '13 at 10:15
source share


More articles:


All Articles