Как валидировать группу radio button в angular?

Рейтинг: 0Ответов: 2Опубликовано: 23.02.2015

Свалидировать на обязательное заполнение:

<input type="radio" name="type[]" value="1" required="required">
<input type="radio" name="type[]" value="2" required="required">
<input type="radio" name="type[]" value="3" required="required">

Ответы

▲ 1Принят

html:

<div ng-app="myapp">
    <form name="myForm" novalidate>
        <div ng-show="myForm.type.$error.required">Type Required.</div>
        <input type="radio" name='type' ng-model="type" value="1" required>
        <input type="radio" name='type' ng-model="type" value="2" required>
        <input type="radio" name='type' ng-model="type" value="3" required>
   </form>     
</div>

js:

angular.module('myapp', []);

Смотрите результат

Обновление #1

С использованием submit.

html:

<div ng-app="myapp">
    <form name="myForm" ng-submit="submit()" ng-controller="FormController" novalidate>
        <div ng-show="myForm.$submitted && myForm.type.$error.required" class="error">Types Required.</div>
        <input type="radio" name='type' ng-model="type" value="1" required>
        <input type="radio" name='type' ng-model="type" value="2" required>
        <input type="radio" name='type' ng-model="type" value="3" required>       
        <button type="submit">Submit</button>
   </form>     
</div>

js:

angular.module('myapp', [])
    .controller('FormController', FormController);

FormController.$inject = ['$scope'];
function FormController($scope) {
    $scope.$submitted = false; // $submitted в Angular 1.3 доступно по умолчанию
    $scope.submit = function() {
        $scope.myForm.$submitted = true;
    } 
}

Смотрите результат

P.S. Не совсем понял, зачем вам массив type[], потому заменил на type.

Обновление #2

C email.

<div ng-app="myapp">
    <form name="myForm" novalidate>
        <div ng-show="myForm.type.$error.required">Type Required.</div>
        <input type="radio" name='type' ng-model="type" value="1" required>
        <input type="radio" name='type' ng-model="type" value="2" required>
        <input type="radio" name='type' ng-model="type" value="3" required>
        <input type="text" name="email" ng-model="email" required> 
        <div ng-show="myForm.email.$error.required">Email Required.</div>
   </form>     
</div>

Смотрите результат

Если необходимо, чтобы после загрузки страницы с формой не показывались ошибки, добавляем $pristine,т.е.

Для email:

 <div ng-show="!myForm.email.$pristine && myForm.email.$error.required">Email Required.</div>

С email + submit.

<div ng-app="myapp">
    <form name="myForm" ng-submit="submit()" ng-controller="FormController" novalidate>
        <div ng-show="myForm.$submitted && myForm.type.$error.required">Type Required.</div>
        <input type="radio" name='type' ng-model="type" value="1" required>
        <input type="radio" name='type' ng-model="type" value="2" required>
        <input type="radio" name='type' ng-model="type" value="3" required> 
        <input type="text" name="email" ng-model="email" required>
        <div ng-show="myForm.$submitted && myForm.email.$error.required" class="error">Email Required.</div>
  
        <button type="submit">Submit</button>
   </form>     
</div>

Смотрите результат

▲ 1

В темплейте:

<input type="radio" ng-model="type" name="type" value="1">
<input type="radio" ng-model="type" name="type" value="2">
<input type="radio" ng-model="type" name="type" value="3">

<div ng-if="type == null">
    Нужно выбрать что-нибудь
</div>

В контроллере:

$scope.type = null; // установить начальное значение, если нужно

$scope.$watch(function(){
    return $scope.type;
}, function(newValue, oldValue) {
    // что-нибудь сделать при изменении
});

Собственно такой же пример на официальном сайте