AngularJS isolate scope ng-model validation

Question

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

Can you explain elaborately? Can't understand what is the actual problem. — Thangadurai
– Thangadurai, Commented Jan 23, 2016 at 5:56

10BitDev · Accepted Answer · 2016-01-23 07:52:53Z

1

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>

Here is an updated plunk

answered Jan 23, 2016 at 7:52

10BitDev

2101 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jeefo Over a year ago

I didn't know about ng-model-options. I learned getterSetter option and fixed the problem. Thanks :)

10BitDev Over a year ago

Thank you for accepting my very first answer. I'm glad you were able to find another way.

Collectives™ on Stack Overflow

AngularJS isolate scope ng-model validation

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related