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


Popular posts from this blog

php - How should I create my API for mobile applications (Needs Authentication) -

5 Reasons to Blog Anonymously (and 5 Reasons Not To)

Google AdWords and AdSense - A Dynamic Small Business Marketing Duo