Geek Answers Handbook

$ values ​​in AngularJS

I have a quick question regarding the values ​​and scope of an area in AngularJS. It will probably be a little stupid, but I'm interested.

Assuming I use the controllerAs syntax and my controller instance is ctrl , I will say something like a form with this input:

 <form name="ctrl.form"> <input type="text" ng-model="ctrl.firstName" /> </form>

Why can I do this in my controller:

 if(this.form.$valid) { //code... }

But not this:

 var form = this.form; if(form.$valid) { //code }

The first example works, but the second example returns undefined . Did I miss something simple here with variable assignment? Since this.form contains a value, why is it not assigned to form ?

Thanks!

+5
source share
1 answer

EDIT:

I solved the problem - the reason the second undefined example returned was because the variables were assigned outside the form submission function. IE in full context, here is my entire file up to where I get undefined:

 (function () { 'use strict'; //signup controller definition var SignupCtrl = function($http, $q, User, FormTools) { var firstName = this.firstName, lastName = this.lastName, password = this.password, form = this.signupForm; function submitRegistration() { //check if the form is valid if(form.$valid) { console.log("valid"); var user = { firstName: firstName, lastName: lastName, password: password }; User.createUser(user) .then(function(response) { console.log('user saved!'); }, function(err) { console.error('error, user wasn\'t saved. reason: ' + err); }); //if the form isn't valid at all } else { return false; } } this.submitRegistration = submitRegistration; }; angular .module('signup', []) .config(['$stateProvider', function($stateProvider) { $stateProvider .state('signup', { url: '/signup', //path relative to index.html templateUrl: 'modules/signup/signup.html', controllerAs: 'signup', controller: 'SignupCtrl' }); }]) .controller('SignupCtrl', [ '$http', '$q', 'User', 'FormTools', SignupCtrl ]); })();

The submitRegistration function is called on the submit form in my form:

 <form ng-submit="signup.submitRegistration()" id="signup-form" name="signup.signupForm" novalidate>

I assume that the form variables (i.e. this.firstName , this.lastName , etc.) were undefined until the submit function was called. To fix this, I just swapped places where I assigned variables:

 (function () { 'use strict'; //signup controller definition var SignupCtrl = function($http, $q, User, FormTools) { function submitRegistration() { var firstName = this.firstName, lastName = this.lastName, password = this.password, form = this.signupForm; //check if the form is valid if(form.$valid) { console.log("valid"); var user = { firstName: firstName, lastName: lastName, password: password }; User.createUser(user) .then(function(response) { console.log('user saved!'); }, function(err) { console.error('error, user wasn\'t saved. reason: ' + err); }); //if the form isn't valid at all } else { return false; } } this.cool = function() { console.dir(this.signupForm); }; this.submitRegistration = submitRegistration; this.sayHello = User.sayHello; }; angular .module('signup', []) .config(['$stateProvider', function($stateProvider) { $stateProvider .state('signup', { url: '/signup', //path relative to index.html templateUrl: 'modules/signup/signup.html', controllerAs: 'signup', controller: 'SignupCtrl' }); }]) .controller('SignupCtrl', [ '$http', '$q', 'User', 'FormTools', SignupCtrl ]); })();

Now that the variables have been moved to the local function area, it works. I assume that the controller does not have access to these variables until the form is submitted, but I could be wrong.

PS: If you are wondering why I define my controller function outside of .controller() , it is easier for me to debug it, because in case of exceptions I will have a named function in my stack trace instead of anonymous one.

Thanks!

0
source

More articles:


All Articles