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文件链接到如下定义的控制器：

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/ 并且我看到，控制器以不同的方式定义，但我想在不改变当前结构的情况下完成它。

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>

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

在Angular中确认密码错误消息

1 个答案: