AngularJs: how to apply Form validation on dynamic element created by directive

Question

In our form elements are created dynamically using ng-repeat. Storing form values in $scope.answers.[attribute name].

In the same way I want to apply validation on change as form submit. but unable to call validation on dynamic elements.

my html element (index.html)

<div ng-if="que.QuestionData._fieldType === 'text'" >
                        <text-control-dir data-que-obj="que.QuestionData" ></text-control-dir>  
                        {{answers[que.QuestionData._attributeName]}}
                        <span ng-show="DTOstep1.answers[que.QuestionData._attributeName].$touched && DTOstep1.answers[que.QuestionData._attributeName].$invalid">The name is required.</span>
                    </div>

(controlDirectives.js) directive have html for form controls. Refer this plunker for full code. https://plnkr.co/edit/GA74YHNFxFb0ARg16Sjj?p=preview

I am stuck to pass dynamic name here <span ng-show="DTOstep1.answers[que.QuestionData._attributeName].$touched && DTOstep1.answers[que.QuestionData._attributeName].$invalid"> — pandu das
– pandu das, Commented Jul 25, 2016 at 12:43

krutkowski86 · Accepted Answer · 2016-07-25 13:31:54Z

2

First of all you need to use ngModel https://docs.angularjs.org/api/ng/directive/ngModel. Otherwise it won't register any validation error in you form. Furthermore you you wont't need elemen.on('change') just use ngModel directive. Finally add novalidate attribute into you form element if you're using your own validation messages.

ngModel is responsible for:

Binding the view into the model, which other directives such as input, textarea or select require.

Providing validation behavior (i.e. required, number, email, url).

Keeping the state of the control (valid/invalid, dirty/pristine, touched/untouched, validation errors).

Setting related css classes on the element (ng-valid, ng-invalid, ng-dirty, ng-pristine, ng-touched, ng-untouched, ng-empty, ng-not-empty) including animations.

Registering the control with its parent form.

By the way ng- prefixed directive don't need {{ }}. For example you should't write

required="{{queObj._required}}" but required="queObj._required"

Here's a working plunker for text-control-dir

https://plnkr.co/edit/wDPtvj29pt0E6Y7QC0j0?p=preview

edited Jul 25, 2016 at 13:31

answered Jul 25, 2016 at 13:02

krutkowski86

1,0839 silver badges16 bronze badges

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

11 Comments

pandu das Over a year ago

How to move <span ng-show=... inside directive to manage look and feel of UI.

pandu das Over a year ago

want to show error msg below input box and from control with red borders.

krutkowski86 Over a year ago

@pandudas working plunker with validation messages inside directive plnkr.co/edit/cqg0rL0GPcXI4IsaAaWG?p=preview

pandu das Over a year ago

thanks. I did similar changes for select control, and all is working, but if selected value is empty or -1, both should show error.

pandu das Over a year ago

What is this textControlForm, will this function work for all control like select and radio.

|

Collectives™ on Stack Overflow

AngularJs: how to apply Form validation on dynamic element created by directive

1 Answer 1

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related