Question

我的表格中有下拉列表。我需要在我从列表中选择元素之前关闭我的提交btn。我的btn：

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

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

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

    <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

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

将课程.form-control添加到所有文字<input>，<textarea>和<select>元素
错误消息可以显示为<span class="help-inline" ng-show="submitted && form.businessprocess.$error.required">Required</span>
使用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

＆＃13;

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

＆＃13;

Answer 2

尝试为$ pristine添加额外的支票：

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

Answer 3

试试这个

像这样使用ng-disabled

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

Answer 4

使用以下代码进行表单验证。

HTML

<form role="form" name="form" ng-submit="mysubmit()" 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"
          ng-required="true"> 
    <option value="">Select Service</option> 
  </select>
  <div data-ng-show="form.service_id.$dirty && form.service_id.$invalid">
            <span data-ng-show="form.service_id.$error.required">Select service</span>
    </div>
  <input type="submit" value="Get" ng-disabled="form.$invalid " />
</form>

角度控制器

angular.module("myApp").controller("Ctrl", ["$scope", function($scope){
        $scope.mysubmit = function(){
          alert("mysubmit");
        };

        $scope.services = [{ServiceID : 1,ServiceName: "A" }, {ServiceID : 2,ServiceName: "B" }]
      }]);

您可以在ng-submit函数中将完整格式作为参数传递以供进一步使用。

AngularJS Dropdown在提交前需要验证

4 个答案: