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

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

当密码位于输入字段的最小长度和最大长度之间时，它会按原样显示密码文本

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

---

这是Angular的一个bug还是我做错了什么

这是出于设计，但我在文档中找不到任何明确说明这一点的参考。Angular在满足验证条件之前不会更改模型。您可以通过在输入（）上方添加

{{user.password}

来演示这一点。只有键入8个字符，才能在页面上看到文本

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

HTML

密码为：{{user.password}}




标准输入：




密码指令：

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 = '';
            });
        }
    };
});

函数x（$scope）{
$scope.user={
密码：“x”
};
}
角度.module（'app'，[]）
.directive（'password'，function（）{
返回{
模板：“”+
'' +
'    ' +
'    ' +
'    ' +
'',
限制：'E'，
替换：正确，
范围：{
ngModel:“=”，
名称：'='
},
链接：函数（范围、元素、属性）{
作用域.$watch（'viewPasswordCheckbox'，函数（newValue）{
var show=newValue？1:0，
隐藏=新值？0:1，
输入=元素。查找（'input'）；
输入[show]。值=输入[hide]。值；
输入[hide].style.display='none'；
输入[show].style.display=''；
});
}
};
});

感谢您的时间和回复；）我会试试这个，实际上我还在玩弄它——我似乎无法在指令内部进行表单验证。这似乎与形式不符。奇怪的是，他没有在自己的范围内持有价值观，我想我会删除ng minlength并自己控制价值观

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 = '';
            });
        }
    };
});