HTML AngularJs CSS Form submit -
i'm having problem when submit form.
so.. fill data on formulary click save... data correctly saved, after submit, fields cleaned , inputs receive css because form submitted. don't keep formulary 'submitted' when correctly saved.
my code going bellow.
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 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" 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" 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 district.name 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 address.public_place 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 zip_code.number 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" 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()" value="limpar formulário" /> </form>
css code
.css-form.ng-submitted .ng-invalid{ border: 1px solid #fa787e; }
angularjs controller function
self.createcitizen = function(form){ if(form.$valid){ $http.post(apiurl + endpoint, self.citizen).then(function(response){ alertsservice.add('success', 'morador criado com sucesso!'); 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.'); } };
i used form.$setpristine();
on create function
self.createcitizen = function(form){ if(form.$valid){ $http.post(apiurl + endpoint, 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.'); } };
it works me.
thank all