1

カスタム コンポーネント ディレクティブに AngularJS が提供する組み込みのフォーム検証を使用したいと考えています。しかし、うまくいきません。検証が失敗した場合、modelValue と viewValue は '' 空の文字列に設定されます。タイピングが全部なくなった…

script.js

angular.module("myModule", [])
     .directive("customIsolateDirective", function () {
        return {
            restrict : "A",
            scope : {
                ngModel : "="
            },
            // Replace original template
            template : '<div ng-form="form"><input ng-model="ngModel" ng-maxlength="10" ng-class="{ error : form.$invalid }"></div>',
            replace : true
        };
    });
};

DOM HTML 内

<input type"text" ng-model="model" custom-isolate-directive>

DOM 要素で ng-model を使用できますか? カスタムのisolateディレクティブもなしでng-modelディレクティブを使用したいからです。

目標は、各フォーム コンポーネント ディレクティブに独自の独立したスコープを持たせ、独自のスコープに依存しない親スコープを検証することです。<input ng-model="model">要素の ng-model ディレクティブを変更すると、正常に<input model="model">動作します。私の質問は、ng-model属性を使用して、分離された子スコープのng-modelを同じ名前で双方向にバインドできますか? コンポーネントのディレクティブを動的に変更したいかもしれないからです。

これがPlunkerで作成した問題です

4

1 に答える 1

1

この奇妙な動作が発生する理由は、最大長を超えると、入力をバインドしているモデル プロパティが未定義になるためです。これを修正するには、入力で allowInvalid モデル オプション フラグを true に設定するだけです。

<div ng-form="form">
<p>Please try to type something in the input box. <em>(max-length: 11)</em></p>
<input ng-model="ngModel" ng-maxlength="11" ng-model-options="{allowInvalid: true}" ng-class="{ error : form.$invalid }">
<p style="margin-top : 0;">ngModel length : {{ ngModel.length }}</p>
<pre>{{ form | json }}</pre>

ここに更新されたプランクがあります

于 2016-01-23T07:52:53.520 に答える