'AngularJs form validation not working with ng-show
I am struggling with ng-show and $invalid logic, my requirement is very simple I need to make a form that will show input fields based on conditions.
I need to add one datetime picker of moment.js.
Issue starts when I understand that my datetime picker is not working with ng-if because ng-if removes the element from the DOM and my datetime picker can't work with this, I used ng-show instead and it worked. But the issue is my form is divided into multiple different forms based on conditions I am showing different inputs and datetime picker is not in all the conditions.
This thing causing my submit button to kept disabled on those conditions when I am not showing datetime picker.
I tried finding a lot thought of using ng-switch as well but I got to know that ng-swith also works the same as ng-if, this will again cause me the same issue if datetime picker (won't work).
Is there any way to resolve this
My code structure -
<div id="mainDiv">
    <form id="myForm">
        <div ng-show="condition1">
            <div ng-if="condition1of1">
             // input fields such as text email password
            </div>
            <div ng-show="condition2of1">
            //date time picker here 
            </div>
            
            <div ng-if="condition3of1">
            // other input fields
            </div>
        </div>
        <div ng-if="condition2>......</div>
        <div ng-if="condition3>......</div>
        <input id="btn" type="submit" ng-disabled="myForm.$invalid" value="Submit" ng-click="submitData()"> // button that will remain disable until all the required fields will not get resolved.
    </form>
</div>
How to resolve this issue?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source | 
|---|
