Validate List of radium buttons with Angular.JS

Question

Validate List of radium buttons with Angular.JS

Navigation

#1 by (2 votes)

1

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

Code:

<!DOCTYPEhtml><html><head><title></title></head><body><div><label>1.Asimagensestãolegíveis?</label><brclass="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 angularjs css

asked by anonymous 10.02.2017 / 21:50

1 answer

How to create sublists with pairs of elements (x, y), where the first of them (x) is in a sequence? Access Restriction, in Visual Studio Project, with C #! [closed]

score 2 · Accepted Answer

You need to make some changes to your HTML where the <input type="radio" /> group must have the same name , the logic stays in the angled to have a control of the application.

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