Angular JS密码匹配不起作用

时间:2018-01-18 12:43:50

标签: angularjs

我正在尝试在我的网页上的Angular JS中实现密码匹配验证,并且由于某种原因它无法正常工作。我一步一步地虔诚地跟随并从控制器实现了该方法,并且我下载了角度文件,该文件位于名为includes的文件夹中。即使很难,它似乎也不起作用。有人能给我一个帮助吗?

我在注册页面上的字段

<html lang="en-US" ng-app="myApp">

<head>

<meta charset="UTF-8">
    <script type="text/javascript" src="includes/angular.min.js"></script>
    <script type="text/javascript" src="includes/fintechjobs.js"></script>

      <style>

      .msg-block {
          margin-top:5px;
      }
      .msg-error {
          color:#F00;
          font-size:14px;
      }

      </style>

</head>

    <body class="size-1140" ng-controller="stageController">

    <form name="myForm" class="customform" method="POST" action="registercandidate.php" >

    <input type="password" name="pw1" id="pw1" ng-model="pw1" ng-required="" placeholder="Password"><br>
                  <input type="password" name="pw2" id="pw2" ng-model="pw2" ng-required="" pw-check="pw1" placeholder="Confirm Password"><br>

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


    <input type="submit" class="button button-dark-stroke text-size-12" value="Submit" style="width:100px;">


    </form>

</body>
</html>

这是我使用Angular应用程序的JS文件

'use strict';
angular.module('myApp', ['myApp.directives']);
/* Controllers */
function stageController($scope) {
    $scope.pw1 = 'pw1';
}
/* Directives */
angular.module('myApp.directives', [])
    .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 () {
                    // console.info(elem.val() === $(firstPassword).val());
                    ctrl.$setValidity('pwmatch', elem.val() === $(firstPassword).val());
                });
            });
        }
    }
}]);

任何不起作用的特殊原因?

1 个答案:

答案 0 :(得分:2)

请以此格式设置您的ng-model

ng-model="object.pw1" 

而不是

ng-model="pw1" 

然后尝试在您使用ng-model

的任何地方更改值

有关详细信息,请参阅此链接

object in ng-model