Как сделать поле формы условно обязательным
У меня есть раскрывающийся список, который отображается при определенных условиях. Как сделать обязательным, если он виден?
<div class = "col-md-6" ng-show = "vm.UserList.length > 0">
<label for = "Users">{{vm.Resources.Model}}</label>
<select class = "form-control" id = "users" ng-change = "vm.OnSomething()" ng-model = "vm.UserId">
....
</select>
</div>
В других моих обязательных выпадающих списках у меня есть атрибут «required»:
<select class = "form-control" required = "" ... >
Если ng-show истинно, как я могу установить требуемый атрибут в раскрывающемся списке?
@ DannyFardyJhonstonBermúdez прав, и вы даже можете сделать его короче !: ng-required = "vm.UserList.length"
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете заменить ng-show = "vm.UserList.length > 0 на ng-if = "vm.UserList.length > 0
В этом случае элемент dom не будет присутствовать, только если условие истинно и будет добавлен атрибут required.
Если условие ng-if не выполняется, то элемент dom вообще не будет присутствовать в dom
Вы можете использовать директиву ngRequired.
ngRequired adds the required validator to ngModel. It is most often used for input and select controls, but can also be applied to custom controls.
При использовании: ng-required = "vm.UserList.length > 0".
На изображении ниже вы можете увидеть, как он добавляет атрибут required в элемент управления select.
Смотрите в действии:
(function() {
var app = angular.module("app", []);
app.controller("Controller", [function() {
var vm = this;
vm.UserList = [{
"UserId": 1,
"UserName": "User 1"
}, {
"UserId": 2,
"UserName": "User 2"
}, {
"UserId": 3,
"UserName": "User 3"
}];
vm.Resources = {};
vm.Resources.Model = "Field";
vm.remove = function(i) {
vm.UserList.splice(i, 1);
};
}]);
}());<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app = "app">
<div ng-controller = "Controller as vm">
<div class = "col-md-6" ng-show = "vm.UserList.length > 0">
<label for = "Users">{{vm.Resources.Model}}</label>
<select class = "form-control" id = "users" ng-change = "vm.OnSomething()" ng-model = "vm.UserId" ng-required = "vm.UserList.length > 0">
....
</select>
<br />
<ul>
<li ng-repeat = "user in vm.UserList">
<span ng-bind = "user.UserName"></span> <button type = "button" ng-click = "vm.remove($index)">X</button>
</li>
</ul>
</div>
</div>
</div>
Просто:
ng-required = "vm.UserList.length > 0".