Javascript AngularJS下拉列表需要验证

下面是我的代码片段。我想使用angular验证我的下拉列表。

* 
选择服务

有效方式：

---

有效值可以是除“选择服务”之外的任何值，这是我的默认值。与其他ASP.net一样，下拉列表需要字段验证器DefaultValue=“0”，因此这里我的下拉列表将与服务绑定，我希望选择除“选择服务”之外的所有其他值。

您需要在下拉列表中添加一个

名称

属性，然后需要添加一个

必需的
属性，然后您可以使用
myForm.[input name].$error.required引用错误：

HTML:


输入服务名称


选择服务
选择服务
控制器：
函数Ctrl（$scope）{
$scope.services=[
{ServiceID:1，ServiceName:'Service1'}，
{ServiceID:2，ServiceName:'Service2'}，
{ServiceID:3，ServiceName:'Service3'}
];
$scope.save=函数（myForm）{
console.log（'Selected Value:'+myForm.service_id.$modelValue）；
警报（“数据已保存！未验证”）；
};
}

这是一张工作票
 需要指出的是，选择需要ng模型才能正常工作。ngOptions需要ngModel。您使用了Dirty，但直接按“提交”按钮的用户将看不到此消息。如果在提交表单时设置showmessage这样的参数，并使用此参数而不是dirty，则效果会更好。我有一个提交按钮。如果我将所选选项更改为非默认选项，然后切换回默认并尝试提交，则该选项适用。错误消息正确显示。但是，如果我来到屏幕并立即单击“提交”按钮，则不会显示任何错误消息，即使默认选项是默认选择的。我可以通过将我作为select的ng模型的变量设置为null并将ng显示为（formName.myoption.$dirty | | isSubmitted）来克服这一问题&&formName.myoption.$error.required。单击“提交”按钮时，isSubmitted设置为true。
<td align="left" width="52%"> 
  <span class="requiredSmall">*</span> 
    <select class="Sitedropdown" style="width: 220px;" 
            ng-model="selectedSpecimen().serviceID" 
            ng-options="service.ServiceID as service.ServiceName for service in services"> 
         <option value="" ng-selected="selected">Select Service</option> 
   </select> 
</td>

        <form name="myForm" ng-controller="Ctrl" ng-submit="save(myForm)" novalidate>
        <input type="text" name="txtServiceName" ng-model="ServiceName" required>
<span ng-show="myForm.txtServiceName.$error.required">Enter Service Name</span>
<br/>
          <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> 
          <span ng-show="myForm.service_id.$error.required">Select service</span>

        </form>

    Controller:

        function Ctrl($scope) {
          $scope.services = [
            {ServiceID: 1, ServiceName: 'Service1'},
            {ServiceID: 2, ServiceName: 'Service2'},
            {ServiceID: 3, ServiceName: 'Service3'}
          ];

    $scope.save = function(myForm) {
    console.log('Selected Value: '+ myForm.service_id.$modelValue);
    alert('Data Saved! without validate');
    };
        }