javascript - AngularJS 下拉菜单在提交前需要验证

Question

我的表单中有下拉列表。在从列表中选择元素之前，我需要关闭提交按钮。我的按钮:

<input type="submit" value="Get" ng-disabled="form.$invalid " />

我尝试使用This 。但是只有当我选择元素然后选择空时，我的按钮才会无效。从一开始就可见。

编辑:添加了我的所有代码

    <form name="form" ng-controller="Ctrl">

  <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>
  <input type="submit" value="Get" ng-disabled="form.$invalid " />
</form>

我想收到这样的错误消息:“需要服务”，这将禁用我的 btn。

Answer 1

下面的代码片段给出了一个示例，根据问题中发布的代码，我想发表一些评论

1. 添加类(class) .form-control至所有文本<input> , <textarea> ，和<select>元素
2. 错误消息可以这样显示 <span class="help-inline" ng-show="submitted && form.businessprocess.$error.required">Required</span>
3. 使用ng-class即使在提交后也可以控制必填字段，请检查以下说明

表单来控制required即使在提交之后，字段选项也必须明确提及它的行为应该是什么。因为在下拉场景中，有时用户可能会选择下面代码中的默认值:<option value="">-- Select Business Process --</option>为了跟踪我在代码中提到的 ng-class="{true: 'error'}[submitted && form.businessprocess.$invalid]"当提交表单并且指定的表单字段为 $invalid 时，这会告诉它的错误。大多数情况下它被用作 ng-class="{'has-success': inputform.email.$valid, 'has-error': inputform.email.$invalid}"在ng-class属性

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form name="form" ng-app>
  <div class="control-group" ng-class="{true: 'error'}[submitted && form.businessprocess.$invalid]">
    <label class="control-label" for="businessprocess">Your Test dropdown</label>
    <div class="controls">
      <select class="form-control" name="businessprocess" ng-model="businessprocess" required>
        <option value="">-- Select Business Process --</option>
        <option value="C">Process C</option>
        <option value="Q">Process Q</option>
      </select>
      <span class="help-inline" ng-show="submitted && form.businessprocess.$error.required">Required</span>
    </div>
  </div>

  <button type="submit" class="btn btn-primary btn-large" ng-click="submitted=true" ng-disabled ="form.$invalid ">Submit</button>
</form>