Input capture of an angled form

Question

Input capture of an angled form

Asked 4 years, 9 months ago

Viewed 26 times

0

I am trying to create an object containing all the inputs of a form so that if any are checked, others become disable. Is there any way

document.forms['formParada'].elements['checkboxTipoParada'];

This is the HTML

<label for="tipoParada">Tipo de parada:</label><br>
<form id="formParada" name="tipoParada">
    <input type="checkbox" name="checkboxTipoParada" ng-click="defineParada()">Disponibilidade<br>
    <input type="checkbox" name="checkboxTipoParada" ng-click="defineParada()">Performance<br>
    <input type="checkbox" name="checkboxTipoParada" ng-click="defineParada()">Qualidade<br>
</form>

And so is my code

$scope.defineParada = function () {
    let checkboxObj = angular.element("formParada").elements;

    for (let i = 0; i < checkboxObj.length; i++){
        if (checkboxObj[i].checked == true){
            console.log(checkboxObj[i].value);
        } else {
            checkboxObj[i].disabled = true;
        }
    }
};

1

Doing this with angular is out of the standard and it doesn’t even make sense to use it like this, it also loses reactivity. Use ng-model and do the manipulation for it. Depending on how you want to trigger the modifications you can use ng-click, ng-change or a $watch.

– Leonardo Getulio

2019/09/16 at 17:06

1 answer

Browser other questions tagged javascript node.js angular

You are not signed in. Login or sign up in order to post.

by Leonardo Getulio • **1,143** points · Answer 1 · 2019-09-16T17:40:00+00:00

I’d do +/- like this:

var myApp = angular.module('myApp', []);
myApp.controller('myController', function myController($scope) {
  $scope.valorSelecionado = '';
  $scope.checkboxObj = [
  	{nome: 'Disponibilidade', valor: 'vlDisponibilidade', _checked: false},
  	{nome: 'Performance', valor: 'vlPerformance', _checked: false},
  	{nome: 'Qualidade', valor: 'vlQualidade', _checked: false},
  ];
  
  $scope.podeAtivarCheckbox = function(valor) {
    const itemSelecionado = $scope.checkboxObj.find(item => item._checked);
    if (itemSelecionado && valor !== itemSelecionado.valor) {
        return false;
    }
    return true;
  }
  
  /*$scope.defineParada = function () {
    let checkboxObj = angular.element("formParada").elements;
    
      for (let i = 0; i < checkboxObj.length; i++){
          if (checkboxObj[i].checked == true){
              console.log(checkboxObj[i].value);
          } else {
              checkboxObj[i].disabled = true;
          }
      }
  };*/
});

<html ng-app="myApp" ng-controller="myController">

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<label for="tipoParada">Tipo de parada:</label><br>
<form id="formParada" name="tipoParada">
    <label ng-repeat="ckecboxItem in checkboxObj">
      <input type="checkbox" ng-value="ckecboxItem.valor" ng-disabled="!podeAtivarCheckbox(ckecboxItem.valor)" name="checkboxTipoParada" ng-model="ckecboxItem._checked">
      {{ckecboxItem.nome}}
      <br>
    </label>
    {{valorSelecionado}}
</form>
</html>