Invalid form control using name = '' does not focus on hidden element

Question

I have an element that conditionally appears, which should be filled when it is visible. (using ng-required)

However, when it is not displayed, I get the following error:

Invalid form control using name = '' does not focus

How to make ng-work ONLY if the element is visible. I do not want to enter novalidate in the form, because if I do this when the element is visible, the check will not happen.

Answer 1

Similarly, using boolean for ng-show and ng-required :

 <form> <input type="text" ng-show="displayCondition" ng-required="displayCondition"/> </form> 

Good question - many people do not realize that passing false to ng-required disables the directive.

Answer 2

I solved this very easily with ng-if instead of ng-show! We only have ng-if. When this is not visible, the item is no longer in code. Therefore, the browser will not check it.