0

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

<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">
3
  • Создайте эти инпуты с помощью директивы ng-input или добавьте ng-model. Оба варианта позволят scope видеть изменения этих инпутов и в контроллере или директиве можно будет делать соотвествующую валидацию.
    – zhenyab
    Commented 23 февр. 2015 в 9:16
  • Для всех input добавить ng-model="type"? а в контроллере как проверить на null? В шаблоне использовать ng-show="?"
    – Jony
    Commented 23 февр. 2015 в 9:27
  • @Jony, Если вам дан исчерпывающий ответ, отметьте его как верный (нажмите на галку рядом с выбранным ответом).
    – romeo
    Commented 24 февр. 2015 в 14:10

2 ответа 2

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>

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

8
  • Большое спасибо! Подскажите как обработать результат от AJAX? Например вывести сообщение?
    – Jony
    Commented 23 февр. 2015 в 14:02
  • @romeo код можно дополнить сообщением о невалидном e-mail <div class="error" ng-show="myForm.email.$error.email">Not valid email!</div>
    – zhenyab
    Commented 23 февр. 2015 в 14:10
  • @zhenyab А если кириллица будет использоваться в email-адресе? RegEx-ы тогда уж.
    – romeo
    Commented 23 февр. 2015 в 14:16
  • тогда можно перенести валидацию в контроллер и указать свою функцию, а для темплейта ничего не изменится :)
    – zhenyab
    Commented 23 февр. 2015 в 14:18
  • @zhenyab именно так я и делаю в своих проектах :)
    – romeo
    Commented 23 февр. 2015 в 14:21
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) {
    // что-нибудь сделать при изменении
});

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

4
  • Не совсем понял, как вывести ошибку в ng-show=""
    – Jony
    Commented 23 февр. 2015 в 9:50
  • дополнил ответ
    – zhenyab
    Commented 23 февр. 2015 в 9:57
  • Спасибо! Под-вопрос один. Как описать ng-show чтобы реагировать тут же на неправильный email?
    – Jony
    Commented 23 февр. 2015 в 13:46
  • @Jony Смотрите мой ответ. Обновил для email.
    – romeo
    Commented 23 февр. 2015 в 13:52

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.