I've been searching for an answer to this issue for two days now. I'm hoping someone can assist me.
Here is the index HTML code I am working with:
<div class="container-fluid" ng-controller="citizensController as citizensCtrl">
<h1>Residents</h1>
<hr>
<uib-tabset active="activeForm">
<!-- TAB 1 START -->
<uib-tab index="0" heading="New">
<div class="animated fadeIn" data-ng-include='"templates/pages/citizens/form.html"'></div>
</uib-tab>
<!-- NEW TAB START -->
<uib-tab index="1" heading="Report" ng-click="citizensCtrl.reportTab()">
<div id="grid-citizens" ui-grid="citizensCtrl.gridOptions" class="grid" ng-if=" citizensCtrl.gridOptions.data"></div>
</uib-tab>
<!-- TAB 3 STARTS -->
<uib-tab index="2" heading="View">
Some Tab Content
</uib-tab>
</uib-tabset>
</div>
And here is the form HTML code:
<form name="citizenForm" ng-submit="citizensCtrl.createCitizen(citizenForm)" class="css-form" novalidate>
<div class="form-group">
<label for="citizen_name">Name *</label>
<input type="text" class="form-control" id="citizen_name" placeholder="Name" ng-model="citizensCtrl.citizen.name" required>
</div>
<div class="form-group">
<label for="citizen_birthday">Birthday *</label>
<uib-datepicker ng-model="citizensCtrl.citizen.birthday" class="well well-sm" datepicker-options="citizensCtrl.dateOptions" required></uib-datepicker>
</div>
// Remaining form elements and input fields...
<input type="submit" class="btn btn-primary" value="Create" />
<input type="reset" class="btn btn-default" ng-click="citizensCtrl.defineCitizen(); citizenForm.$setPristine()" value="Clear Form" />
</form>
Additionally, this is the function in my AngularJs controller that gets triggered:
self.createCitizen = function(form){
if(form.$valid){
$http.post(apiUrl + endpoint, angular.extend({},self.citizen)).then(function(response){
alertsService.add('success', 'Resident created successfully!');
form.$setPristine();
self.defineCitizen();
}, function(error){
alertsService.add('danger', 'Oops.. Something went wrong. Please contact the administrator.');
});
}else{
alertsService.add('danger', 'You need to fill out all required fields.');
}
};
The issue arises when submitting the form with errors such as missing required items. The CSS changes to indicate the errors, but switching tabs and returning to the form tab does not clear the error styling on the inputs. It seems like the form remains dirty or something similar.