Question

我已经两天都在寻找答案了。我希望你帮助我。

所以我有我的索引HTML代码：

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

这是表单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>

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

这是我的AngularJs控制器中触发的功能：

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

好吧，当我提交带有一些错误的处方集时，我的问题就出现了。
然后css改变以显示缺少的内容。
在这一刻，如果我更改选项卡并再次返回到处方集选项卡，输入应该丢失css并出现错误，但我的处方集会保持脏或类似的东西。

Answer 1

我的解决方案是在表单中设置ng-if，以指导用户。如果您离开选项卡“创建标签”，则表单会因ng-if而被删除。所以当我再次回到“创建”标签时，它就会被重建。

当我离开标签时，如何保证我的表格

1 个答案: