HTML AngularJs CSS-Formular senden

Question

Ich habe ein Problem, wenn ich das Formular absende.

So .. Ich fülle alle Daten auf der Formelsammlung dann klicke ich auf Speichern ... Die Daten werden korrekt gespeichert, aber nach dem Senden werden die Felder gereinigt und dann erhalten die Eingaben die CSS, da das Formular bereits übergeben wurde. Ich möchte das Formular nicht "eingereicht" behalten, wenn es korrekt gespeichert wird.

Mein Code wird untergehen.

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 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" 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 Reglerfunktion

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.'); 
    } 
}; 

Answer 1

verwendete ich form.$setPristine(); auf 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.'); 
    } 
}; 

Es funktioniert perfekt für mich.
Vielen Dank alle