AngularJS下拉需要验证

Posted 2023-02-22

【中文标题】AngularJS下拉需要验证

【英文标题】：AngularJS Dropdown required validation

【发布时间】：2013-02-27 21:34:47

【问题描述】：

以下是我的代码 sn-p。我想使用 Angular 验证我的下拉菜单。

<td align="left" > 
  <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>

有效的意思是：

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

【参考方案1】：

您需要在下拉列表中添加name 属性，然后您需要添加required 属性，然后您可以使用myForm.[input name].$error.required 引用错误：

html：

        <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');
    ;
        

这是一个有效的plunker。

【讨论】：

需要说明的是，select 需要 ng-model 才能工作

正确，ngOptions 需要 ngModel。

你使用了Dirty，但是直接按下提交按钮的用户不会看到这个消息。如果你在提交表单的时候设置了showmessage之类的参数，用这个参数代替dirty，效果会更好。

我遇到了这个例子的问题。我有一个提交按钮。如果我将选定的选项更改为非默认值，然后切换回默认值并尝试提交，它适用。错误消息正确显示。但是，如果我来到屏幕并立即单击提交按钮，即使默认选项是...默认选中，也不会显示错误消息。

我能够通过将我作为 ng-model 的变量设置为 null 并将 ng-show 设置为 (formName.myoption.$dirty || isSubmitted) && formName 来克服这个问题.myoption.$error.required。当单击提交按钮时，isSubmitted 设置为 true。