forms - パスワード チェックボックス フィールド AngularJS 最小/最大長の問題

Question

チェックボックスにチェックを入れるとパスワードが表示されるパスワード欄を作りました。
パスワードの長さを制御するために ng-minlenght と ng-maxlength を使用しています。

パスワードが入力フィールドの最小長と最大長の間にある場合、パスワード テキストが表示されます。

しかし、パスワードが有効でない場合/フィールドの最小長と最大長の間にない場合、空の値が返されます。

プランクの例

これはAngularのバグですか、それとも何か間違っていますか?

Answer 1

これは仕様によるものですが、明示的に記載されているドキュメントの参照が見つかりません。検証基準が満たされるまで、Angular はモデルを変更しません。{{user.password}}入力の上に追加することで、それが実証されていることがわかります（ here）。8 文字を入力するまで、ページにテキストは表示されません。

次のように、2 つのテキスト フィールドを手動で同期するディレクティブを使用することで、これを回避できます。

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