1

Having these two files:

HTML:

<form name="registrationForm" ng-submit="registerUser()">
   ...
</form>

JS (inside the Angular controller):

$scope.registrationForm.confirmPassword.$setValidity("PasswordsMatch", $scope.validation.doPasswordsMatch);

I get the error that Cannot read property 'confirmPassword' of undefined

This leads me to believe that I have no access to the form registrationForm in the controller. Based on this (https://docs.angularjs.org/api/ng/type/ngModel.NgModelController) I imagined that I should.

Other solutions that I've seen include passing the form to the controller when the form is submitted, but what I need to do (set custom validation) needs to happen way before that.

Other solution mentioned adding the controller to the form via ng-controller but that changed nothing.

EDIT: From the website above, is there a reason why in here (https://plnkr.co/edit/ZT0G6ajdbescT72qLKSU?p=preview) $scope.myForm can be accessed, but only inside of the $scope.setEmpty function?

2
  • <form form="registrationForm" ng-submit="registerUser()"> should be <form name="registrationForm" ng-submit="registerUser()">, name is valid attribute for form tag Commented Aug 30, 2016 at 18:33
  • Sorry, that was originally name instead of form. Just fixed it the question. Commented Aug 30, 2016 at 18:38

4 Answers 4

4

I recommend using the controller itself instead of the $scope provider for this. This was one of the first issues I came across when working with angularjs

In your controller:

function MyController($scope) {
  var vm = this;
  vm.registrationForm.confirmPassword.$setValidity("PasswordsMatch", $scope.validation.doPasswordsMatch);
}

In your form:

<form name="vm.registrationForm" ng-submit="registerUser()">
   ...
</form>

The only gotcha is that you need to specify the controllerAs property in your route or ngInclude:

ng-include="templates/my-template.html" ng-controller="MyController as vm"

or

when('/my-route', {
  templateUrl: 'templates/my-template.html',
  controller: 'MyController as vm'
 })
Sign up to request clarification or add additional context in comments.

7 Comments

Is there a reason why we have to use the variable vm? can we just do this.registrationForm...?
Additionally, I did the steps in your snippets #1, #2, and #4 (I set the controller in the router) but I still get the same error.
You must make sure you are using the controllerAs when referencing your template or it will not work. You might be able to use this but it's bad practice because this is contextual and changes meaning depending on where it is used
You don't have to use vm but it is the preferred name. Check out this style guide: github.com/johnpapa/angular-styleguide
The line where I set the controller is ... controller: 'RegistrationController as vm'... Is that not how you set it controllerAs?
|
0

You need to add a name attribute to form element.

<form name="registrationForm" ng-submit="registerUser()">
   ...
</form>

1 Comment

It is originally name, must have changed it by accident when writing the question. Just fixed it, thanks for pointing it out.
0

this form must rely on a controller indeed. please take a look at the example:

angular.module("fooApp",[]);

angular.module("fooApp")
  .controller("formctl",function(){
    this.user={};
    this.dosave=function(){
      if(this.user.pwd == this.user.confpwd)
        alert(this.user.username+" logged");
      else
        alert("pwd does not match");
    };
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="fooApp">
  <h1>sample</h1>
  <div ng-controller="formctl as ctl">
    <form ng-submit="ctl.dosave()">
      <label>username</label><br/>
      <input ng-model="ctl.user.username" required/><br/>
      <label>password</label><br/>
      <input ng-model="ctl.user.pwd" type="password" required/><br/>
      <label>confirm password</label><br/>
      <input ng-model="ctl.user.confpwd" type="password"/><br/>
      <input type="submit"/>
    </form>
  </div>
</div>

Comments

0

You'll want to pass the form into the submit function to pass the entire form into the controller. Use the form name.

<form name="registrationForm" ng-submit="registerUser(registrationForm)">
...
</form>

The other option would be to pass the inputs directly in as params

<form name="myForm" novalidate >
  some input: <input type="text" name="sometext" ng-model="myInput">
  <input type="submit" ng-click="doAction(myInput)">
</form>

Quick Plunk https://plnkr.co/edit/s0Al2LTHkvUPoLYNzTpm?p=info

If you're just after the value of the inputs, it's easier to test if you have explicit parameters that you expect on the method instead of dumping in the entire form.

2 Comments

That is what I am doing right now, but I want to implement real time validation, instead of validation that only happens when the user submits the form.
@SammyI. See if this works for you. There's even a plunk included. odetocode.com/blogs/scott/archive/2014/10/13/…

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.