In Angular, how to get a form in $scope in control

Question

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?

Answer 1

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'
 })

Answer 2

You need to add a name attribute to form element.

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

Answer 3

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.

Answer 4

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>