Свалидировать на обязательное заполнение:
<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">
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', []);
С использованием 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
.
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>
В темплейте:
<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) {
// что-нибудь сделать при изменении
});
Собственно такой же пример на официальном сайте
input
добавитьng-model="type"
? а в контроллере как проверить на null? В шаблоне использоватьng-show="?"