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?