密码复选框字段AngularJS最小/最大长度问题

Question

我创建了一个密码字段，在选中复选框时显示密码。
我正在使用 ng-minlenght 和 ng-maxlength 来控制密码长度。

当密码介于输入字段的最小和最大长度之间时，它会按应有的方式显示密码文本。

但是当密码无效/不在字段的最小和最大长度之间时，我得到一个空值。

Plnkr Example

这是 Angular 中的错误还是我做错了什么？

Answer 1

这是设计使然，但我在文档中找不到任何明确说明它的参考。在满足验证标准之前，Angular 不会更改您的模型。您可以通过在输入 (here) 上方添加 {{user.password}} 来看到这一点。在您输入 8 个字符之前，您不会看到页面上的文本。

您可以通过使用手动同步两个文本字段的指令来解决此问题，如下所示：

http://jsfiddle.net/langdonx/K6Qgm/11/

HTML

<div ng-app="app" ng-controller="x">
    password is: {{user.password}}
    <br/>
    <br/>
    standard input:
    <input ng-model="user.password" name="uPassword" type="password" ng-hide="isChecked" ng-minlength="8" ng-maxlength="20" placeholder="Password" required/>
    <br/>
    <br/>
    password directive: 
    <password ng-model="user.password" name="uPassword" />
</div>

JavaScript

function x($scope) {
    $scope.user = {
        password: 'x'
    };
}

angular.module('app', [])
    .directive('password', function () {
    return {
        template: '' +
            '<div>' +
            '    <input type="text" ng-model="ngModel" name="name" ng-minlength="8" ng-maxlength="20" required />' +
            '    <input type="password" ng-model="ngModel" name="name" ng-minlength="ngMinlength" required />' +
            '    <input type="checkbox" ng-model="viewPasswordCheckbox" />' +
            '</div>',
        restrict: 'E',
        replace: true,
        scope: {
            ngModel: '=',
            name: '='
        },
        link: function (scope, element, attrs) {
            scope.$watch('viewPasswordCheckbox', function (newValue) {
                var show = newValue ? 1 : 0,
                    hide = newValue ? 0 : 1,
                    inputs = element.find('input');
                inputs[show].value = inputs[hide].value;
                inputs[hide].style.display = 'none';
                inputs[show].style.display = '';
            });
        }
    };
});