Cannot get form data with ng-model

Question

So I have two forms inside the same controller.

<form name="myForm" id="myForm" class="form-horizontal" ng-submit="saveMyForm(myForm)" >
  <input type="text" id="name" ng-model="name"  />    
  //...etc
</form>

and another form

<form name="passForm" id="passForm" ng-submit="savePassForm(passForm)" >
  <input type="password" id="oldpassword" name="oldpassword" ng-model="oldpassword" >    
  <input type="password" id="pw1" name="pw1" ng-model="pw1" >    
  <input type="password" id="pw2" name="pw2" ng-model="pw2"  pw-check="pw1" >    
</form>

<div class="msg-block" ng-show="passForm.$error">
      <span class="msg-error loginError" ng-show="passForm.pw2.$error.pwmatch">
        Passwords don't match.
      </span>
</div> 

To check if passwords match I have this directive

  app.directive('pwCheck', [function () {
    return {
      require: 'ngModel',
      link: function (scope, elem, attrs, ctrl) {
        var firstPassword = '#' + attrs.pwCheck;
        elem.add(firstPassword).on('keyup', function () {
          scope.$apply(function () {
            var v = elem.val()===$(firstPassword).val();
            ctrl.$setValidity('pwmatch', v);
          });
        });
      }
    }
  }]); 

So my first form works fine.

In my second form, the one for passwords, I cannot grab the passwords from the fields to send them to the server. I do

 var passData = {                    
     "oldpassword" : $scope.oldpassword,
     "newpassword" : $scope.pw2                           
 }   

  $scope.changepassword = function(form){                          

     if(form.$valid) {
        var promisePass  = passwordFactory.changePass(passData);
        promisePass.success(function (data, status) {
         //handle

When I check my console, there are no data, passData is empty.

What am I missing here? Is it the fact that there are two forms inside the same controller? Does the directive messes things up?

Please help me fix this.

Thanks

Answer 1

I see a couple issues. First, the function name you have specified here:

<form name="passForm" id="passForm" ng-submit="savePassForm(passForm)" >

Does not match the name in your controller:

$scope.changepassword = function(form){

Second, you create your passData object outside of the submit function. This means it's going to have the values of the scope variables when the controller first loaded, likely undefined. Move the creation of passData inside your function and then it will be created with the current values of the scope variables.