HTML AngularJs CSSフォームsubmit

Question

フォームを送信すると問題が発生します。

処方箋のすべてのデータを記入して保存をクリックします。データは正しく保存されますが、送信後にフィールドが消去され、入力はフォームがすでに送信されているため、cssを受け取ります。私は処方箋が正しく保存されたときに処方箋を「提出済み」にしないようにしたいと思います。

私のコードは蛇行しています。

HTMLコード

<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コード

.css-form.ng-submitted .ng-invalid{ 
    border: 1px solid #FA787E; 
} 

AngularJSコントローラ機能

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

私はそれが私のために完璧に動作

​​

関数を作成の上form.$setPristine();を使用。
ありがとうございました