'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 |
---|