Question

我试图使用bootstrap和angularjs验证表单。我有两组我要验证的复选框。用户应从每个组中选择至少一个复选框，以便启用“提交”按钮并提交值。

演示：https://en.wikipedia.org/wiki/Curiously_recurring_template_pattern

在上面的演示中，用户应选择RED，BLUE和Mac1，Mac2中的至少一个来启用SubmitValue按钮，用户可以提交数据。

示例代码：

<form name="eltForm">
    <h4>--FORM VALIDATION--</h4>
    <div class="btn-group" name="color">
        <label class="btn btn-primary btn-sm" ng-model="model1.prod1" uib-btn-checkbox="prod1">RED
            <span class="glyphicon glyphicon-info-sign"></span>
        </label>
        <label class="btn btn-primary btn-sm" ng-model="model1.prod2" uib-btn-checkbox="prod2">BLUE
            <span class="glyphicon glyphicon-info-sign"></span>
        </label>
        <div ng-show="eltForm.$submitted || eltForm.color.$touched">
            <p class="error-mesg" ng-show="eltForm.color.$error.required">Please Select the Color.</p>
        </div>
    </div>
    <div class="btn-group" style="margin: 0 3px;padding: 5px;" name="machines">
        <label class="btn btn-primary btn-sm" ng-model="model2.item1" uib-btn-checkbox="item1">Mac1
            <span class="glyphicon glyphicon-info-sign"></span>
        </label>
        <label class="btn btn-primary btn-sm" ng-model="model2.item2" uib-btn-checkbox="item2">Mac2
            <span class="glyphicon glyphicon-info-sign"></span>
        </label>
        <div ng-show="eltForm.$submitted || eltForm.machines.$touched">
            <p class="error-mesg" ng-show="eltForm.machines.$error.required">Please Select the Machines.</p>
        </div>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-primary btn-xs" style="margin: 13px;" ng-click="submitValue()" ng-disabled="myForm.$invalid">SubmitValue</button>
    </div>
</form>

Answer 1

 $scope.submitValue = function(){
   if(($scope.model1.prod1 || $scope.model1.prod2 )&& ($scope.model2.item1 || $scope.model2.item2))
   alert('Hi');
 }

请将您的控制器更改为上面的代码。

检查here

Answer 2

您需要ID才能向ng-disabled添加button字段并将其标记为$scope上的字段，例如：$scope.buttonDisabled = true;这将禁用该按钮并添加ng-click上的label or button并根据条件检查model值并设置/重新设置$scope.buttonDisabled字段。

var myApp = angular.module('app', ['ui.bootstrap']);
myApp.controller('dataCtrl', function($scope, $uibModal) {
  'use strict';
  $scope.buttonDisabled = true;
  $scope.model1 = {
    prod1: false,
    prod2: false,

  };
  $scope.model2 = {
    item1: false,
    item2: false,

  };

  $scope.clicked = function() {
    if (($scope.model1.prod1 || $scope.model1.prod2) && ($scope.model2.item1 || $scope.model2.item2)) {
      $scope.buttonDisabled = false;
    }
  }
  $scope.submitValue = function() {
    if (($scope.model1.prod1 || $scope.model1.prod2) && ($scope.model2.item1 || $scope.model2.item2)) {
      alert('VALID')
    }
  }
});

.btn span.glyphicon {
  opacity: 0;
}

.btn.active span.glyphicon {
  opacity: 1;
}

<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap-css@*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  <script data-require="angular.js@1.5.0" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.4.js"></script>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css" />
</head>

<body ng-app="app" ng-controller="dataCtrl">

  <form name="eltForm">
    <h4>--FORM VALIDATION--</h4>
    <div class="btn-group" name="color">
      <label class="btn btn-primary btn-sm" ng-click="clicked()" ng-model="model1.prod1" uib-btn-checkbox="prod1">RED
<span class="glyphicon glyphicon-info-sign"></span>
    </label>
      <label class="btn btn-primary btn-sm" ng-click="clicked()" ng-model="model1.prod2" uib-btn-checkbox="prod2">BLUE
    <span class="glyphicon glyphicon-info-sign"></span>
    </label>
      <div ng-show="eltForm.$submitted || eltForm.color.$touched">
        <p class="error-mesg" ng-show="eltForm.color.$error.required">Please Select the Color.</p>
      </div>

    </div>
    <div class="btn-group" style="margin: 0 3px;padding: 5px;" name="machines">
      <label class="btn btn-primary btn-sm" ng-click="clicked()" ng-model="model2.item1" uib-btn-checkbox="item1">Mac1
    <span class="glyphicon glyphicon-info-sign"></span>
    </label>
      <label class="btn btn-primary btn-sm" ng-click="clicked()" ng-model="model2.item2" uib-btn-checkbox="item2">Mac2
    <span class="glyphicon glyphicon-info-sign"></span>
    </label>
      <div ng-show="eltForm.$submitted || eltForm.machines.$touched">
        <p class="error-mesg" ng-show="eltForm.machines.$error.required">Please Select the Machines.</p>
      </div>
    </div>
    <div class="btn-group">
      <button type="button" ng-disabled="buttonDisabled" class="btn btn-primary btn-xs" style="margin: 13px;" ng-click="submitValue()" ng-disabled="myForm.$invalid">SubmitValue</button>
    </div>

  </form>
</body>

</html>

选择至少一个项目来提交表格

2 个答案: