javascript - AngularJS 隔离范围 ng-model 验证

Question

我想使用 AngularJS 为自定义组件指令提供的内置表单验证。然而它不起作用。当验证失败时 modelValue 和 viewValue 设置为 '' 空字符串。我失去了所有的打字能力...

脚本.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 吗？因为我也想使用 ng-model 指令而不使用自定义隔离指令。

目标是我希望每个表单组件指令都有它自己的隔离范围，并验证它自己的范围独立的父范围。如果我改变<input ng-model="model">元素的 ng-model 指令为 <input model="model">效果很好。我的问题是我可以使用 ng-model 属性以两种方式绑定(bind)子隔离范围的 ng-model 具有相同的名称吗？因为也许我想动态更改我的组件指令。

这是我在 Plunker 中创建的问题

Answer 1

您出现这种奇怪行为的原因是，当超过最大长度时，您将输入绑定(bind)到的模型属性将变得未定义。要解决此问题，您所需要做的就是将输入上的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>

Here is an updated plunk