Validation does not work with ng-model

Question

Validation does not work with ng-model

Navigation

#1 by (0 votes)

0

Why does not this validation work? When I was just

  $scope.exibeValidacaoTarefa = function(){
      return $scope.atividadeInput == null
            || $scope.atividadeInput.descAtividade == null
            || $scope.atividadeInput.descAtividade == ""
            || $scope.atividadeInput.solicitante == null
            || $scope.atividadeInput.solicitante == ""
            || $scope.tarefasSelecionadas == null 
            || $scope.tarefasSelecionadas.length <= 0;

}

It worked, but I added a condition for when input ng-model="tarefaSelecionada.ordemTarefa" is also required, and now no validation works anymore. I did not understand the logic error

$scope.exibeValidacaoTarefa = function() {

  for (tarefa in $scope.tarefasSelecionadas) {
    if ($scope.tarefasSelecionadas[tarefa].ordemTarefa == null ||
      $scope.tarefasSelecionadas[tarefa].ordemTarefa == "" ||
      $scope.atividadeInput == null ||
      $scope.atividadeInput == "" ||
      $scope.atividadeInput.descAtividade == null ||
      $scope.atividadeInput.descAtividade == "" ||
      $scope.atividadeInput.solicitante == null ||
      $scope.atividadeInput.solicitante == "" ||
      $scope.tarefasSelecionadas == null ||
      $scope.tarefasSelecionadas.length <= 0) {

      return false;
    }
  }

}

<form name="atividadesForm">
  <div class="form-group">
    <label class="" for="orderBy">Nome</label> <input class="form-control" ng-model="atividadeInput.descAtividade" type="text" placeholder="Nome da atividade" id="nome-tarefa" ng-required="true" maxlength="100">
    <div class="help-block with-errors"></div>
  </div>
  <div class="form-group">
    <label class="" for="orderBy">Solicitante</label> <input class="form-control" ng-model="atividadeInput.solicitante" type="text" placeholder="Solicitante" id="" ng-required="true" maxlength="100">
    <div class="help-block with-errors"></div>
  </div>
  <div id="erroAtividade" class="alert alert-danger" ng-show="atividadesForm.$invalid">Por favor, preencha todos os campos.<br> Adicione pelo menos uma tarefa.</div>
  <div class="adiciona-tarefa">
    <button type="button" class="btn btn-primary btn-sm" data-title="Add" data-toggle="modal" data-target="#listagem-tarefas">
							<span class="glyphicon glyphicon-plus"></span>Tarefa
						</button>
  </div>
  <p>Tarefas</p>
  <div style="overflow: scroll; height: 200px; margin-top:12px;">
    <table class="table table-sm table table-striped table-bordered sorted_table">
      <tbody>
        <thead>
          <tr>
            <th>Ordem</th>
            <th>Código</th>
            <th>Nome</th>
            <th>Tipo</th>
            <th>Ação</th>
          </tr>
        </thead>
        <tr ng-repeat="tarefaSelecionada in tarefasSelecionadas">
          <td scope="row"><input type="text" class="form-control" name="numbers" ng-model="tarefaSelecionada.ordemTarefa" placeholder="" style=" width: 50px;" ng-required="true" maxlength="20" required></td>
          <td>{{tarefaSelecionada.codigo}}</td>
          <td>{{tarefaSelecionada.descricao}}</td>
          <td>{{tarefaSelecionada.descTipo}}</td>
          <td class="text-center">
            <p data-placement="top" data-toggle="tooltip" title="Excluir" class="acoes-btn">
              <button class="btn btn-danger btn-xs" ng-click="apagarSelecionada(tarefaSelecionada)" data-title="Delete" data-toggle="modal">
											<span class="glyphicon glyphicon-trash"></span>
										</button>
            </p>
          </td>
        </tr>
      </tbody>
    </table>

  </div>

</form>

<button type="button" class="btn btn-primary btn-md limpa-tarefas-em-atividades" ng-click="adicionarAtividade(atividadeInput)" data-dismiss="modal" id="btn-cadastra-atividade" onclick="atualiza()" ng-disabled="exibeValidacaoTarefa()">
							<span class="glyphicon glyphicon-ok-sign"></span> Salvar
						</button>

angularjs

asked by anonymous 02.08.2017 / 17:55

1 answer

Thymeleaf does not display date in HTML5 component Slider with specific forward arrow

score 0 · Accepted Answer

With the line

return false;

Evaluation is returning by the end of the first cycle of for (tarefa in $scope.tarefasSelecionadas) .

You need to iterate through all items before finalizing. Change your routine to something like this:

$scope.exibeValidacaoTarefa = function() {

var resultado = false;

  for (tarefa in $scope.tarefasSelecionadas) {
    if ($scope.tarefasSelecionadas[tarefa].ordemTarefa == null ||
        $scope.tarefasSelecionadas[tarefa].ordemTarefa == "")
          resultado = true; 
  };

  resultado = resultado || 
  $scope.atividadeInput == null ||
  $scope.atividadeInput == "" ||
  $scope.atividadeInput.descAtividade == null ||
  $scope.atividadeInput.descAtividade == "" ||
  $scope.atividadeInput.solicitante == null ||
  $scope.atividadeInput.solicitante == "" ||
  $scope.tarefasSelecionadas == null ||
  $scope.tarefasSelecionadas.length <= 0;

  return !resultado;
}