Wymagane pola wyboru AngularJS

Mam formularz, w którym użytkownicy muszą odpowiadać na pytania za pomocą pól wyboru. Istnieje sporo pól wyboru i używam AngularJS w formularzu do sprawdzenia poprawności. Podstawową weryfikacją jest wypełnienie wszystkich wymaganych pól.Wymagane pola wyboru AngularJS

Poniżej jest mój przykładowy kod:

<input type="checkbox" name="skills"> IT 
<input type="checkbox" name="skills"> Design 
<input type="checkbox" name="skills"> Photoshop 
<input type="checkbox" name="skills"> Writing

Teraz chcę pola wyboru, aby być wymagane więc od „umiejętności” wyboru użytkownikowi conajmniej kontrole 1 Box.

Próbowałem wstawić znacznik required, ale wydawało się, że nie działa.

Im przy angularjs do sprawdzania poprawności mojego formularza Podobnie jak

<button ng-disabled="myForm.$invalid">Submit</button>

jakiś pomysł jak mogę to naprawić? Jeśli potrafisz pracować, to świetnie.

Źródło

2017-02-01 Skywalker

To zależy od NG-modelu. Jeśli wypełniasz wszystkie wartości w tablicy, możesz zrobić 'myArray.length' – nivas

@nivas, ponieważ można sprawdzić więcej niż 1 element. Używam funkcji JavaScript do przechodzenia przez wszystkie pola wyboru i' push' do wszystkich "sprawdzonych" pola do tablicy. I wyślij tę tablicę na mój serwer. Więc nie skorzystałem z modelu ng. – Skywalker

następnie możesz sprawdzić długość tablicy prawy – nivas

Jeśli chcesz potwierdzić za pomocą NG-disabled = "MyForm. $ Nieważny"

var app = angular.module('myModule', []); 
 

 
     app.controller("myController", function ($scope) { 
 
      $scope.choices = [{"name":"IT"},{"name":"Design"},{"name":"Technology"}]; 
 
      $scope.checkBoxArray = []; 
 
      $scope.validate = function (value) { 
 
       if ($scope.checkBoxArray.indexOf(value) == -1){ 
 
        $scope.checkBoxArray.push(value); 
 
       } 
 
       else { 
 
        $scope.checkBoxArray.splice($scope.checkBoxArray.indexOf(value), 1); 
 
       } 
 
      } 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<html ng-app="myModule"> 
 
    <body ng-controller="myController"> 
 
<ng-form name="myForm"> 
 
    <span ng-repeat="choice in choices"> 
 
     <input type="checkbox" name="skills" ng-required="checkBoxArray.length==0" ng-model="choice.checked" ng-change="validate(choice.name)"> 
 
     {{choice.name}} 
 
    </span> 
 
</ng-form> 
 
<button ng-disabled="myForm.$invalid">Submit</button> 
 
</body> 
 
</html>

Źródło

2017-02-01 12:14:14 fatema

Spróbuj demo pracy:

var myApp = angular.module('myApp',[]); 
 

 
myApp.controller('MyCtrl',function($scope) { 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    <form name="checkBoxForm"> 
 
     <input type="checkbox" name="skills" ng-model="IT">IT 
 
     <input type="checkbox" name="skills" ng-model="Design">Design 
 
     <input type="checkbox" name="skills" ng-model="Photoshop">Photoshop 
 
     <input type="checkbox" name="skills" ng-model="Writing">Writing 
 

 
    <button ng-disabled="!IT&&!Design&&!Photoshop&&!Writing">Submit</button> 
 
    </form> 
 
</div>

Źródło

2017-02-01 11:19:10

można użyć tablicę, aby to zrobić:

var myApp = angular.module('myApp',[]); 
 

 
myApp.controller('MyCtrl',function($scope) { 
 

 
$scope.collection=[{ 
 
        "Name": "IT"}, 
 
       { 
 
        "Name": "Design"}, 
 
       { 
 
        "Name": "Photoshop"}, 
 
       { 
 
        "Name": "Writing"}]; 
 

 
$scope.disableButton = true; 
 

 
$scope.doTheThings = function (item) 
 
    { 
 
    if (item.checked) 
 
     $scope.disableButton = true; 
 
    else 
 
     $scope.disableButton = false; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
<ul> 
 
<li ng-repeat="item in collection"> 
 
    <input type="checkbox" name="skills" ng-model="item.checked" ng-click="doTheThings(item)"> {{item.Name}} 
 
</li> 
 
</ul> 
 
<button ng-disabled="disableButton"> Submit </button> 
 
</form> 
 
</div>

Źródło

2017-02-01 11:47:18

Niektóre błędy są w tej odpowiedzi. gdy klikniesz więcej niż jedno pole wyboru i odznaczysz pole wyboru, przycisk "Wyślij" zostanie wyłączony, nawet jeśli zaznaczono już pewne pola wyboru. –

Odpowiedz

Powiązane problemy