Question

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

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

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

Plnkr Example

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

Answer 1

这是设计使然，但我在文档中找不到明确说明它的任何参考。在满足验证标准之前，Angular不会更改您的模型。您可以通过在输入上方添加{{user.password}}来证明这一点（here）。在键入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 = '';
            });
        }
    };
});

密码复选框字段AngularJS min / maxlength问题

1 个答案: