无法使用 ng-model 获取表单数据

Question

所以我在同一个控制器中有两个表单。

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

检查密码是否匹配我有这个指令

  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);
          });
        });
      }
    }
  }]);

所以我的第一个表格工作正常。

在我的第二种形式（密码形式）中，我无法从字段中获取密码并将其发送到服务器。我愿意

 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

当我检查我的控制台时，没有数据，passData 是空的。

我在这里错过了什么？同一个控制器中有两种形式吗？该指令会把事情搞砸吗？

请帮我解决这个问题。

谢谢

Answer 1

我看到了几个问题。首先，您在此处指定的函数名称：

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

与您控制器中的名称不匹配：

$scope.changepassword = function(form){

其次，您在提交函数之外创建 passData 对象。这意味着它将在控制器首次加载时具有作用域变量的值，可能 undefined。将 passData 的创建移动到您的函数中，然后它将使用范围变量的当前值创建。

无法使用 ng-model 获取表单数据

Cannot get form data with ng-model

forms

angularjs

angularjs-scope

angular-ngmodel