I am facing a challenge with organizing two sets of data, "heat" and "cold", obtained from an external provider. The data is messy and I have trimmed down the code to focus on the main issue at hand. Both "heat" and "cold" have properties that users need to fill in. These properties are dynamic and the number of fields varies since they are within a loop.
My objective is to disable the submit button at the bottom of the page if any input field in either set of data is left empty. This functionality should also be compatible with Internet Explorer 9 where the 'required' tag is not supported.
Here are the solutions I've tried so far:
Using the required tag: Unfortunately, this doesn't work on IE9 and even in Google Chrome, as the form still submits when fields are empty (even after including form tags).
Implementing Ng-show on the submit form: I attempted to check if userInput is empty, but this approach did not yield the desired outcome.
You might wonder why I don't just validate these properties in my controller during the submit process. While that would be ideal, accessing this dynamic data directly in the controller poses challenges. Therefore, I am seeking a solution that can address this issue with minimal intervention in the controller.
Code:
<!--Start wrapper!-->
<div class="wrapper">
<div ng-repeat="(code, program) in data.old.heat">
<div class="row" ng-repeat="(componentId, component) in program">
<div class="inputForm">
<!--This field may not be left empty!-->
<input type="text" class="form" ng-model="component.userInput">
</div>
</div>
</div>
<div ng-repeat="(code, program) in data.old.cold">
<div class="row" ng-repeat="(componentId, component) in program">
<div class="inputForm">
<!--This field may not be left empty!-->
<input type="text" class="form" ng-model="component.userInput">
</div>
</div>
</div>
</div>
<!--End of wrapper !-->
<div class="submitPanel">
<button ng-click="submit()">Submit</button>
</div>