“必需”验证在具有默认值的 <select> 中不起作用

Question

我有一个必填的<select> 字段：

<select name="service_id" class="Sitedropdown" style="width: 220px;" 
        ng-model="ServiceID" 
        ng-options="service.ServiceID as service.ServiceName for service in services"
        required> 
  <option value="">Select Service</option> 
</select> 

当它为空时，表单应显示“选择服务”错误消息。这是一个有效的plunker。

当您有意选择空选项时，它可以正常工作。但是当你重新加载页面时，service_id 默认是空的并且没有验证。如何让 AngularJS 验证默认值？

Answer 1

您的代码：

ng-show="myForm.service_id.$dirty && myForm.service_id.$invalid"

这意味着 - 如果值是脏的（已更改）并且无效。先删除，你会得到你想要的。

Answer 2

验证检查仅在绑定到ng-model 的值至少更改一次后运行，或在用户尝试提交表单时运行。如果不是这种情况，表单的所有必填字段将在页面加载后立即显示错误，这是一种非常不受欢迎的行为。

这就是为什么您在选择其他内容然后将其更改回空值时只会看到错误的原因。