Question

尝试找出保持在同一页面的最佳方式，如果他们未能检查至少一个复选框，则提醒用户。

HTML：

<div class="col3">
<input type="checkbox" ng-model="$parent.value5" ng-true-value="'Togetherness'" ng-false-value="">
<span class="checkboxtext">
    Togetherness
</span><br>
<!--<p>We value our people and recognize that <strong>Together</strong> we achieve superior results.</p><br>-->
<div class="col3">

    <a ui-sref="form.submit">
        <button name="button" ng-click="SaveValue()">Continue</button>
    </a>

后端angularJS检查是否检查了其中一个框 -

$scope.SaveValue = function () {
    var valueStatus = [];
    if ($scope.value1 === "Methodical")
    {
        valueStatus.push($scope.value1);
    }
    if ($scope.value2 === "Relentless")
    {
        valueStatus.push($scope.value2);
    }
    if ($scope.value3 === "Togetherness")
    {
        valueStatus.push($scope.value3)
    }
    if ($scope.value4 === "Excellent") {
        valueStatus.push($scope.value4)
    }
    if ($scope.value5 === "Ingenious") {
        valueStatus.push($scope.value5)
    }
    return valueStatus
};

基本上我想要创建这些值的数组然后返回它。但是，我希望用户至少检查一个方框。如果valueStatus [0] == null，我已尝试重定向回页面。但是，我不认为这是验证的最佳方式，而且我认为它不应该完全有效。

Answer 1

我解决这个问题的方法是使用隐藏数字输入验证数组的长度（在您的情况下为valueStatus）。输入将进行最小化验证。因此，如果用户未能检查至少一个，则表单未提交;

<input type="number" name="valueStatus" ng-model="valueStatus.length" min="1" style="display: none">

然后，您可以在表单模型

上提供的valueStatus上使用常规验证

myFormName.valueStatus.$valid

这样，大多数逻辑被放入模板中，称为angularjs方式;）

<强>更新

忘记提及：您需要在更改复选框事件

上更新已检查值的列表

<input type="checkbox" ng-model="checkboxValue1" on-change="updateValueStatus(checkboxValue1)">
<input type="checkbox" ng-model="checkboxValue2" on-change="updateValueStatus(checkboxValue2)">

并在控制器中

$scope.updateValueStatus = function(value){
  var indexOf = $scope.valueStatus.indexOf(value);
  if(indexOf < 0) {
     $scope.valueStatus.push(value);
  } else {
     $scope.valueStatus.splice(indexOf, 1);
  }
}

希望它能帮助有同样问题的人

Answer 2

只需检查valueStatus长度是否等于0

$scope.SaveValue = function () {
    var valueStatus = [];
    if ($scope.value1 === "Methodical")
    {
        valueStatus.push($scope.value1);
    }
    if ($scope.value2 === "Relentless")
    {
        valueStatus.push($scope.value2);
    }
    if ($scope.value3 === "Togetherness")
    {
        valueStatus.push($scope.value3)
    }
    if ($scope.value4 === "Excellent") {
        valueStatus.push($scope.value4)
    }
    if ($scope.value5 === "Ingenious") {
        valueStatus.push($scope.value5)
    }


    if (valueStatus.length === 0 ) {
       console.log('please select atleast one select box')
    }
    return valueStatus
};

已编辑

删除ui-sref标记并更改点击功能中的状态

<button name="button" ng-click="SaveValue()">Continue</button>

在saveValue函数中

添加此

if (valueStatus.length === 0 ) {
       console.log('please select atleast one select box')
}else{
    $state.go('form.submit') // if atleast one selected then the page will change 
}

尝试验证至少检查了一个复选框angularJS

2 个答案: