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
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