如何设置表单字段条件必填？AngularJS下拉列表显示时设为必填

这问题我熟，你需要的是AngularJS的ng-required指令，它能根据你指定的表达式动态决定是否添加必填验证，正好匹配你“下拉可见时才必填”的需求。

具体修改步骤： #

把你原来的select标签里的静态required属性，换成绑定了显示条件的ng-required：

<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> 
</div>

为什么这样可行？ #

ng-required是AngularJS专门用来动态控制必填属性的指令：

• 当表达式vm.UserList.length > 0为true时（也就是下拉列表显示的时候），它会自动给select加上原生的required属性，触发表单验证；
• 当表达式为false时（下拉隐藏），会移除required属性，不再要求必填。

这样你的表单验证逻辑就和下拉的显示逻辑完全同步了，不需要额外写JS去手动添加/移除属性，非常简洁。

内容的提问来源于stack exchange，提问作者cool breeze