javascript - Angular 中的确认密码错误消息

Question

我正在尝试创建一个简单的密码确认，如下所示

<div class="form-group">
        <label class="col-sm-2 control-label" for="password">Password:</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="password" placeholder="Password" data-ng-model="myApp.password" required >
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label" for="confirmPassword">Confirm password:</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="confirmPassword" placeholder="Confirm password" data-ng-model="confirmPassword" required pw-check="password">
            <p class="msg-error" ng-show="create_player_form.confirmPassword.$error.pwmatch">
                Passwords don't match.
            </p>
        </div>
    </div>

此 HTML 文件链接到如下定义的 Controller :

angular.module('myApp')
    .controller('MyController', function ($scope, $state, $stateParams) {
(All the staff...)
}

我使用这样的指令:

.directive('pwCheck', [function () {
            return {
                scope: {pwmatch: '='},
                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);
                        });
                    });
                }
            }
        }]);

一切正常，除了确认输入下的小错误消息之外。谁能帮我让它出现吗？

我公开地说，我正在使用:http://blog.brunoscopelliti.com/angularjs-directive-to-check-that-passwords-match/我发现 Controller 以不同的方式定义，但我想简单地制作它而不改变现有的结构。

Answer 1

 <div class="form-group">
    <label class="col-sm-2 control-label" for="password">Password:    </label>
    <div class="col-sm-10">
        <input type="password" class="form-control" id="password" placeholder="Password" data-ng-model="myApp.password" required >
    </div>
</div>
<div class="form-group">
    <label class="col-sm-2 control-label" for="confirmPassword">Confirm password:</label>
    <div class="col-sm-10">
        <input type="password" name="confirmPassword" class="form-control" id="confirmPassword" placeholder="Confirm password" data-ng-model="confirmPassword" required pw-check="password">
        <p class="msg-error" ng-show="create_player_form.confirmPassword.$error.pwmatch">
            Passwords don't match.
        </p>
    </div>
</div>

在输入 name="confirmPassword"中添加名称标签，然后尝试。此外，您的表单名称将为“create_player_form”