Validate List of Radium Buttons with Angular.JS

Asked

Viewed 93 times

1

I have a list of Radium Buttons fields and need to control by angular: Validations: one option at a time and display message.

inserir a descrição da imagem aqui

Code:

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>

  <div>
  <label>1. As imagens estão legíveis?</label><br class="clear">
  <div class="btn-option">
    <input class="bt-yes" type="radio" id="legivelsim" name="legivelsim" value="true" ng-model="checklist.passo" ng-click="adicionar(checklist.passo)">
    <label class="bt-yes" for="legivelsim">SIM</label>
  </div>
  <div class="btn-option">
    <input class="bt-no" type="radio" id="legivelnao" name="legivelnao" value="false" ng-model="checklist.passo" ng-click="adicionar(checklist.passo)">
    <label class="bt-no" for="legivelnao">NÃO</label>
  </div>
</div>
<div>
  <label>2. Documento de Identificação está na  <a>Política de Documentos</a> ?</label><br class="clear">
  <div class="btn-option">
    <input class="bt-yes" type="radio" id="docsim" name="docsim" value="true" ng-model="checklist.passo" ng-click="adicionar(checklist.passo)">
    <label class="bt-yes" for="bt2">SIM</label>
  </div>
  <div class="btn-option">
    <input class="bt-no" type="radio" id="docnao" name="docnao" value="false" ng-model="checklist.passo" ng-click="adicionar(checklist.passo)">
    <label class="bt-no" for="btn2">NÃO</label>
  </div>
</div>
<div>
  <label>3. Documento de Identificação  está dentro do prazo de validade?  Dúvida na análise documental? <a>Clique Aqui.</a></label><br class="clear">
  <div class="btn-option">
    <input class="bt-yes" type="radio" id="validadesim" name="validadesim" value="true" ng-model="checklist.passo" ng-click="adicionar(checklist.passo)">
    <label class="bt-yes" for="bt3">SIM</label>
  </div>
  <div class="btn-option">
    <input class="bt-no" type="radio" id="validadenao" name="validadenao" value="false" ng-model="checklist.passo" ng-click="adicionar(checklist.passo)">
    <label class="bt-no" for="btn3">NÃO</label>
  </div>
</div>



</body>
</html>
javascript java html css angularjs

1 answer

1


Need to make some changes to your HTML where the group of <input type="radio" /> must bear the same name, the logic is in the to have an application control.

angular.module("app", [])
  .controller("ctrl", ["$scope",
    function($scope) {
      $scope.checklist = {
        pergunta1: false,
        pergunta2: false,
        pergunta3: false
      };

      $scope.submit = function() {
        console.log($scope.checklist);
      };
    }
  ]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <div>
    <label>1. As imagens estão legíveis?</label>
    <br class="clear">
    <div class="btn-option">
      <input class="bt-yes" type="radio" id="p0a" name="p0" value="true" ng-model="checklist.pergunta1" ng-checked="checklist.pergunta1">
      <label class="bt-yes" for="p0a">SIM</label>
    </div>
    <div class="btn-option">
      <input class="bt-no" type="radio" id="p0b" name="p0" value="false" ng-model="checklist.pergunta1" ng-checked="!checklist.pergunta1">
      <label class="bt-no" for="p0b">NÃO</label>
    </div>
  </div>
  <div>
    <label>2. Documento de Identificação está na <a>Política de Documentos</a> ?</label>
    <br class="clear">
    <div class="btn-option">
      <input class="bt-yes" type="radio" id="p1a" name="p1" value="true" ng-model="checklist.pergunta2">
      <label class="bt-yes" for="p1a" ng-checked="checklist.pergunta2">SIM</label>
    </div>
    <div class="btn-option">
      <input class="bt-no" type="radio" id="p1b" name="p1" value="false" ng-model="checklist.pergunta2" ng-checked="!checklist.pergunta2">
      <label class="bt-no" for="p1b">NÃO</label>
    </div>
  </div>
  <div>
    <label>3. Documento de Identificação está dentro do prazo de validade? Dúvida na análise documental? <a>Clique Aqui.</a>
    </label>
    <br class="clear">
    <div class="btn-option">
      <input class="bt-yes" type="radio" id="p3a" name="p3" value="true" ng-model="checklist.pergunta3" ng-checked="checklist.pergunta3">
      <label class="bt-yes" for="p3a">SIM</label>
    </div>
    <div class="btn-option">
      <input class="bt-no" type="radio" id="p3b" name="p3" value="false" ng-model="checklist.pergunta3" ng-checked="!checklist.pergunta3">
      <label class="bt-no" for="p3b">NÃO</label>
    </div>
  </div>
  <br />
  <button type="button" ng-click="submit()">Avançar</button>
</div>

  • How can I get the value imput radio ??

  • @alexjosesilva is already in angular that is $scope.checklist has the four true and false values, get it? how are you using angular there are values!

  • var vm = $Scope; vm.add = Function(vm){ vm.Checklist = { question1: false, Pergunta2 : false, question3 : false }; vm.Submit = Function() { console.log(vm.Checklist); }; ; };

  • I’m getting the message: Typeerror: Cannot set Property 'Checklist' of Undefined

  • $scope.checklist would be so! correct, you cannot use Function(vm) without passing the variable! @alexjosesilva. What do you want to do with the values?

  • This is my angular.module controler cabacelho('portalvarejistaApp.mesaAnalise'). controller('Mesaanalisepropostacontroller', Function ($Scope) { var vm = $Scope;

  • @alexjosesilva, OK ... vm receives $scope and ? now be in doubt what is your other doubt?

  • yes...vm gets $Scope

  • how I handle it inside the controller ??

  • @alexjosesilva saw himself my example?

  • Let’s go continue this discussion in chat.

Show 6 more comments

Browser other questions tagged javascript java html css angularjs

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