Diogo Amaral Diogo Amaral - 5 months ago 25
CSS Question

How do I Pristine my Form when I leave the tab



I'm looking for an answer for this already two days. I hope you help me.


So I have my index html code:

<div class="container-fluid" ng-controller="citizensController as citizensCtrl">
<h1>Moradores</h1>
<hr>
<uib-tabset active="activeForm">
<!-- INICIO TAB 1 -->
<uib-tab index="0" heading="Novo">
<div class="animated fadeIn" data-ng-include='"templates/pages/citizens/form.html"'></div>
</uib-tab>

<!-- INICIO TAB NOVO -->
<uib-tab index="1" heading="Relatório" ng-click="citizensCtrl.reportTab()">
<div id="grid-citizens" ui-grid="citizensCtrl.gridOptions" class="grid" ng-if=" citizensCtrl.gridOptions.data"></div>
</uib-tab>

<!-- INICIO TAB 3 -->
<uib-tab index="2" heading="Visão">
Some Tab Content
</uib-tab>
</uib-tabset>
</div>


and this 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">Nome *</label>
<input type="text" class="form-control" id="citizen_name" placeholder="Nome" ng-model="citizensCtrl.citizen.name" required>
</div>

<div class="form-group">
<label for="citizen_birthday">Nascimento *</label>
<uib-datepicker ng-model="citizensCtrl.citizen.birthday" class="well well-sm" datepicker-options="citizensCtrl.dateOptions" required></uib-datepicker>
</div>

<div class="form-group">
<label for="citizen_cell_phone">Celular *</label>
<input type="text" class="form-control" id="citizen_cell_phone" placeholder="Celular" ng-model="citizensCtrl.citizen.cell_phone" mask='(99) 9?9999-9999' mask-restrict="reject" mask-clean="true" required>
</div>

<div class="form-group">
<label for="citizen_phone">Telefone *</label>
<input type="text" class="form-control" id="citizen_phone" placeholder="Telefone" ng-model="citizensCtrl.citizen.phone" mask='(99) 9999-9999' mask-restrict="reject" mask-clean="true" required>
</div>

<hr>
<h4>Endereço</h4>
<div class="form-group">
<label for="citizen_address_district">Bairro *</label>
<select id="citizen_address_district" ng-model="citizensCtrl.citizen.address.district" class="form-control"
ng-options="district as district.name for district in citizensCtrl.districts" ng-change="citizensCtrl.getAddresses()" required>
<option value=""> Bairro</option>
</select>
</div>

<div class="form-group">
<label for="citizen_address_public_place">Rua *</label>
<input type="text" ng-model="citizensCtrl.citizen.address.public_place" id="citizen_address_public_place"
uib-typeahead="address as address.public_place for address in citizensCtrl.addresses | filter:{public_place: citizensCtrl.citizen.address.public_place} | limitTo:5"
typeahead-min-length="6" typeahead-select-on-exact="true"
typeahead-on-select="citizensCtrl.getZipCodes()"
typeahead-loading="loadingLocations"
ng-disabled="!citizensCtrl.citizen.address.district.id"
typeahead-no-results="noResults" class="form-control" required>
<i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
<div ng-show="noResults">
<i class="glyphicon glyphicon-remove"></i> Endereço não encontrado
</div>
</div>

<div class="form-group">
<label for="citizen_address_zip_code">CEP *</label>
<select id="citizen_address_zip_code" ng-model="citizensCtrl.citizen.address.zip_code"
ng-disabled="!citizensCtrl.citizen.address.public_place.id" class="form-control"
ng-options="zip_code as zip_code.number for zip_code in citizensCtrl.zip_codes" required>
<option value="">CEP</option>
</select>
</div>

<div class="form-group">
<label for="citizen_address_number">Numero *</label>
<input type="text" class="form-control" id="citizen_address_number" placeholder="Numero" ng-model="citizensCtrl.citizen.address.number" mask='99999999' mask-restrict="reject" mask-validate="false" required>
</div>

<div class="form-group">
<label for="citizen_address_complement">Complemento</label>
<input type="text" class="form-control" id="citizen_address_complement" placeholder="Complemento" ng-model="citizensCtrl.citizen.address.complement">
</div>

<input type="submit" class="btn btn-primary" value="Criar" />
<input type="reset" class="btn btn-default" ng-click="citizensCtrl.defineCitizen(); citizenForm.$setPristine()" value="Limpar Formulário" />
</form>


and this is the function triggered in my AngularJs controller for that:

self.createCitizen = function(form){
if(form.$valid){
$http.post(apiUrl + endpoint, angular.extend({},self.citizen)).then(function(response){
alertsService.add('success', 'Morador criado com sucesso!');
form.$setPristine();
self.defineCitizen();
}, function(error){
alertsService.add('danger', 'Oops.. Alguma coisa deu errado. Contate o administrador.');
});
}else{
alertsService.add('danger', 'Você precisa preencher todos os campos obrigatórios.');
}
};


Well, my problem occurs when I submit the formulary with some error like required items.

Then the css changes to show what is missing.

In this moment if I change the tab and go back to the formulary tab again the inputs should lose the css with errors, but my formulary is keeping dirty or something like that.

Answer

My solution was to set a ng-if in form looking to guide users are. If you leave the tab "Create tab" form is deleted because of ng-if. So when I go back to the "create" tab again, it is rebuilt.

Comments