Использование параметра «Угловое» для выбора радиокнопки

Мне было предложено отображать на веб-странице переключатели «Да/Нет». В исходном состоянии ни один из этих параметров не выбран. Необходимо убедиться, что пользователь выбирает один из них. Я был в состоянии сделать это, используя веб-браузеры собственную форму проверки, например, так:Использование параметра «Угловое» для выбора радиокнопки

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Example - example-radio-input-directive-production</title> 
    <script src="angular.min.js"></script> 
</head> 
<body ng-app="radioExample"> 
    <script> 
    angular.module('radioExample', []) 
    .controller('ExampleController', ['$scope', function($scope) {  
     $scope.submitForm = function() { 
     alert('valid'); 
    }  
}]); 
</script> 
<form name="myForm" ng-submit="submitForm()" ng-controller="ExampleController" novalidate> 
    <input name="question" type="radio" ng-model="question" value="yes" required>Yes<br/> 
    <input name="question" type="radio" ng-model="question" value="no">No<br/> 
    <pre>myForm.question.$error = {{ myForm.question.$error | json }}</pre> 
    <div ng-messages="myForm.question.$error" role="alert"> 
     <div ng-message="required">You did not enter a field</div> 
    </div> 
    <button type="submit">Submit</button> 
</form> 
</body> 
</html>

Я хотел бы иметь возможность использовать Угловое для отображения сообщений проверки в виде нг-сообщения, но я изо всех сил, чтобы сделать это работы:

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Example - example-radio-input-directive-production</title> 
    <script src="angular.min.js"></script> 
</head> 
<body ng-app="radioExample"> 
    <script> 
    angular.module('radioExample', []) 
    .controller('ExampleController', ['$scope', function($scope) {  
     $scope.submitForm = function() { 
     alert('valid'); 
     }  
    }]); 
</script> 
<form name="myForm" ng-submit="submitForm()" ng-controller="ExampleController" novalidate> 
    <input name="question" type="radio" ng-model="question" value="yes" required>Yes<br/> 
    <input name="question" type="radio" ng-model="question" value="no">No<br/> 
    <pre>myForm.question.$error = {{ myForm.question.$error | json }}</pre> 
    <div ng-messages="myForm.question.$error" role="alert"> 
     <div ng-message="required">You did not enter a field</div> 
    </div> 
    <button type="submit">Submit</button> 
    </form> 
</body> 
</html>

Что я делаю неправильно?

источник

2015-10-06 isxpjm

Я не думаю, что «требуется» действует для радиовхода. Таким образом, поведение браузера/Угловое поведение здесь не указано. Таким образом, проблема в том, что форма действительна. Вот фрагмент кода с тем, что вы просите, но это не совсем понятно и понятно.

angular.module('radioExample', []) 
 
.controller('ExampleController', ['$scope', function($scope) {  
 
    $scope.submitForm = function() { 
 
    alert('valid'); 
 
    }  
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="radioExample"> 
 
<form name="myForm" ng-submit="submitForm()" ng-controller="ExampleController" novalidate> 
 
    <input name="question" type="radio" ng-model="question" value="yes">Yes<br/> 
 
    <input name="question" type="radio" ng-model="question" value="no">No<br/> 
 
    <div ng-if="question!='yes'" role="alert"> 
 
     <div>You did not enter a field</div> 
 
    </div> 
 
    <button type="submit">Submit</button> 
 
    </form> 
 
</div>

источник

2015-10-06 12:12:20 Magus

Try:

HTML:

<form ng-app="radioExample" ng-controller="ExampleController" name="myForm" novalidate ng-submit="submitForm()"> 
    <input name="question" type="radio" ng-model="question" value="yes" required>Yes<br/> 
    <input name="question" type="radio" ng-model="question" value="no">No<br/> 
    <pre>myForm.question.$error = {{ myForm.question.$error | json }}</pre> 
    <div ng-messages="myForm.question.$error" role="alert"> 
     <div ng-message="required">You did not enter a field</div> 
    </div> 

    <input class="btn" type="submit" value="Submit"> 
</form>

JS:

angular.module('radioExample', []) 
    .controller('ExampleController', ['$scope', function($scope) { 
     $scope.submitForm = function() { 
      alert('valid'); 
      return false; 
     } 
    }]);

источник

2015-10-06 12:55:14

Использование параметра «Угловое» для выбора радиокнопки

ответ

Смежные вопросы