嘗試驗證是否至少選中了一個複選框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

回答

相關問題