尝试验证是否至少选中了一个复选框angularJS

试图找出停留在同一页面上的最佳方法，提醒用户他们未能检查至少一个复选框。尝试验证是否至少选中了一个复选框angularJS

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以检查框之一是checked-

$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，我尝试重定向回页面。但是，我不认为这是验证的最佳方式，它不能完全按照我认为的方式工作。

来源

2017-03-07 AndrewG

只是简单地检查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标记，在saveValue改变你的点击功能中的状况

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

功能加这个

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 
}

来源

2017-03-07 17:44:05

这是公平的，但怎么样迫使用户留在同一页面上，按钮指向表单的下一页，我希望它们继续留在页面上告诉valueStatus.length不只是0. – AndrewG

检查更新 –

我解决这个问题的方法是使用隐藏数字输入验证数组长度（您的案例中的valueStatus）。输入将有最小验证。因此，如果用户未能检查至少一个，表单未提交;

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

然后，您可以使用正常的验证上valueStatus上可用的表单模型

myFormName.valueStatus.$valid

这样，大部分的逻辑放入模板，这就是所谓angularjs方式;）

UPDATE

忘了提：您需要更新上改变复选框事件

<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); 
    } 
}

希望这将有助于人们与同一问题检查值列表

来源

2017-03-07 18:31:08

感谢您的帮助，我喜欢解决方案！这两个答案都是有价值的。 – AndrewG

type =“number”很重要 –

尝试验证是否至少选中了一个复选框angularJS

回答

相关问题