How to enable validations only when the HTML element is active using Angular 2?

Question

I have a radio button and a corresponding input text box which is displayed when radio button is checked. I have kept the validation attribute required on the input tag as shown:

<input type="text" id="textbox" required />

This textbox hides when I deselect the radio button. However, I could not submit the form even if the text box is hidden. After all, a required field that is hidden is still required, and so I can't just put the required attribute on those hidden field.

Having explained my scenario:

Is there any "HTML-Only" approach to allow validations only when the textbox is active? If not, how can I achieve the same using Angular 2 (or vanilla JavaScript)?

Disha · Accepted Answer · 2016-09-01 11:31:54Z

1

You can use ' ng-if ' instead of 'ng-show / ng-hide ' while showing/hiding input box. Because , ng-show/hide only hides the element , but it is there in DOM , while ng-if generates element only when condition is fullfilled

edited Sep 1, 2016 at 11:31

answered Sep 1, 2016 at 11:26

Disha

8421 gold badge11 silver badges40 bronze badges

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

1 Comment

Karan Desai Over a year ago

Thanks, with this, I finally understood the clear difference of ng-hide/ng-show and ng-if. Thanks a lot.

Collectives™ on Stack Overflow

How to enable validations only when the HTML element is active using Angular 2?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related