How to do checkbox validation in angular

Question

How to do checkbox validation in angular

Navigation

#1 by (0 votes)

3

I need the add button to be enabled only if at least 1 item in the list has been checked. For input text, I used ng-required="true"

<div class="modal fade" id="listagem-tarefas" tabindex="-1"
    role="dialog" aria-labelledby="listagem-tarefas" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" id="cadastro-tarefa">
            <form data-toggle="validator" role="form">
                <div class="modal-header">
                    <!--button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button-->
                    <h4 class="modal-title custom_align" id="Heading">Listagem de
                        Tarefas</h4>
                </div>
                <!--filtro tarefa -->
                <div
                    style="margin-top: 10px; margin-left: 10px; margin-bottom: 20px;">
                    <button type="submit" class="btn btn-primary btn-sm"
                        data-toggle="collapse"
                        data-target="#form-filtro-tarefa-em-atividade">Filtro</button>
                    <div class="collapse" id="form-filtro-tarefa-em-atividade"
                        style="margin-top: 20px; margin-right: 10px;">
                        <div class="form-group">
                            <label class="" for="orderBy">Código</label> <input
                                class="form-control" type="text" placeholder="Código da tarefa"
                                ng-model="criterioDeBuscaTarefaEmAtividades.codigo" id="">

                        </div>
                        <div class="form-group">
                            <label class="" for="orderBy">Nome</label> <input
                                class="form-control" ng-model="criterioDeBuscaTarefaEmAtividades.descricao"
                                type="text" placeholder="Nome da tarefa" id="">

                        </div>
                        <div class="form-group">
                            <label class="" for="orderBy">Tipo</label> <input
                                class="form-control" ng-model="criterioDeBuscaTarefaEmAtividades.descTipo"
                                type="text" placeholder="Tipo da tarefa" id="">

                        </div>
                    </div>
                </div>
                <div style="overflow: scroll; height: 400px;">
                    <table class="table table-sm table">
                        <thead>
                            <tr>
                                <th><a href="">Seleção</a></th>
                                <th><a href="" ng-click="filtroOrdenarPor('codigo')">Código</a></th>
                                <th><a href="" ng-click="filtroOrdenarPor('descricao')">Nome</a></th>
                                <th><a href="" ng-click="filtroOrdenarPor('tipo')">Tipo</a></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr
                                ng-repeat="tarefa in tarefas | filter:criterioDeBuscaTarefaEmAtividades | orderBy:criterioDeOrdenacaoTarefasEmAtividades:filtroDirecaoDaOrdenacao">
                                <td class="text-center">
                                    <div class="ckbox text-center">
                                        <input type="checkbox" class="checkbox-tarefas-em-atividades"
                                            ng-model="tarefa.selecionada"> <label
                                            for="checkbox1"></label>
                                    </div>
                                </td>
                                <th scope="row" class="text-center">{{tarefa.codigo}}</th>
                                <td>{{tarefa.descricao}}</td>
                                <td>{{tarefa.descTipo}}</td>

                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <div class="flag-obrigatorio">
                        <button type="button" class="btn btn-primary btn-md"
                            ng-click="selecionarTarefas(tarefas)" data-dismiss="modal" id="">
                            <span class="glyphicon glyphicon-ok-sign"></span> Adicionar
                        </button>
                        <button type="button"
                            class="btn btn-primary btn-md limpa-tarefas-em-atividades"
                            data-dismiss="modal">
                            <span class="glyphicon glyphicon-ok-sign"></span> Voltar
                        </button>
                    </div>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

I applied this solution, the button is disabled, then I check and it enables, but if I uncheck it it does not disable again, and it loses its validation.

 $scope.value = [];
    $scope.updateQuestionValue = function(tarefa){
        $scope.value = $scope.value || [];
        if(tarefa.selecionada){
            $scope.value.push(tarefa.value);
            $scope.value = _.uniq($scope.value);
        }else{
            $scope.value = _.without($scope.value, tarefa.value);
        }
    };

<input type="checkbox" class="checkbox-tarefas-em-atividades"
ng-model="tarefa.selecionada" ng-click="updateQuestionValue(tarefas)">

<button type="button" class="btn btn-primary btn-md" 
  ng-click="selecionarTarefas(tarefa)" data-dismiss="modal" id="" ng-
  disabled="value.length==0">
  <span class="glyphicon glyphicon-ok-sign"></span> 
  Adicionar
</button>

angularjs

asked by anonymous 31.07.2017 / 17:09

1 answer

The handle function is not converting - matlab How can I count fields that are NULL?

score 0 · Accepted Answer

I made a very simple example, in this example create a function where, it will analyze the data of array and if it finds an item with property selecionado true ( true ) it releases the submit button. Use ng-required for the function show() , example :

var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
  $scope.tarefas = [{
      'nome': 'a',
      'selecionado': false
    },
    {
      'nome': 'b',
      'selecionado': false
    }
  ];
  $scope.show = function(){
    var sts = false;
    for(i = 0; i < $scope.tarefas.length; i++)
    {
      if ($scope.tarefas[i].selecionado == true)
      {
        sts = true;
        break;
      }
    }
    return sts;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <form data-toggle="validator" role="form" name="form1">
    <table>
      <tr>
        <td>Nome</td>
        <td>Selecionado</td>
      </tr>
      <tr ng-repeat="t in tarefas">
        <td>{{t.nome}}</td>
        <td><input type="checkbox" 
        ng-required="!show()"
        ng-model="t.selecionado" /></td>
      </tr>
    </table>
  </form>
  <button ng-disabled="!form1.$valid">Enviar</button>
</div>