nelsonomuto / angular-ui-form-validation

Directives for angularjs field validation
http://nelsonomuto.github.io/angular-ui-form-validation
MIT License
180 stars 51 forks source link

Support for input components (validation tag not on the element it will validate) #88

Open AS1580 opened 7 years ago

AS1580 commented 7 years ago

Thank you for such a great tool! I'm wondering if it would be possible to add support for inputs enclosed in a component. This component is being used across multiple pages and may not always be required.

Here is the current (simplified) use: I switched some of the angle brackets with parentheses since the code was being removed from my comment.

Angular component myParamInput has the following template: <select name="myParamInputSelect" id="myParamInputSelect" ng-model-"$ctrl.params.myParamInput" ng-options="paramOption in $ctrl.paramOptions">(/select) Then the html page includes the tag (my-param-input)(/my-param-input).

I can get the validation tool working if I put it directly in the template, but I don't want to do that, since it won't be a required field every time it is used in our app. I'm wondering if there is any way to reference the element that you want to validate, to allow for something like the following:

I do understand this is a big thing to ask. I will just make two components, one with the validation and one without, if you don't feel like this is worth the time. Thanks!

nelsonomuto commented 7 years ago

I think I understand what you are requesting, you want to be able to dynamically toggle the validation on and off basically.

I think it would be a great feature. We can accomplish this by using a data attribute data-disable-validation so that if the input element has for example <input id='fieldId' data-disable-validation />

So to toggle off the validation you would need to do document.getElementById('fieldId').setAttribute('data-disable-validation', true)

and then to turn it back on use either document.getElementById('fieldId').removeAttribute('data-disable-validation') or document.getElementById('fieldId').setAttribute('data-disable-validation', false)

AS1580 commented 7 years ago

That would be so helpful! I'm excited to see the solution to this. Thank you very much for taking a look.