I would like to use the built in form validation provided by AngularJS for custom component directive. However it doesn't work. When validation is failed modelValue and viewValue set to '' empty string. I lost all my typing...
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
};
});
};
In DOM HTML
<input type"text" ng-model="model" custom-isolate-directive>
Can I use ng-model in the DOM element? Because I want to use ng-model directive without custom isolate directive too.
The goal is I want to each form component directives has it's own isolated scope and validating it's own scope independent parent scope. If I change <input ng-model="model"> element's ng-model directive to <input model="model"> it works fine. My question is can I use ng-model attribute to two way bind child isolated scope's ng-model with same name?
Because maybe I want to change my component directives dynamically.
Here is the problem that I created in Plunker
The reason you are getting this strange behavior is because the model property that you are binding the input to becomes undefined when the max length is exceeded. All you need to do to fix this is set the allowInvalid model option flag to true on the input.
<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>