AngularJS Dropdown在提交前需要验证答案

【问题标题】：AngularJS Dropdown required validation before submitAngularJS Dropdown在提交前需要验证
【发布时间】：2017-07-15 05:34:42
【问题描述】：

我的表单中有下拉列表。在我从列表中选择元素之前，我需要关闭我的提交 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。

【问题讨论】：

在 ng- disabled 上添加更多条件。你能分享你的表单代码吗？这样我就可以看到具体的解决方案了。
在表单标签中添加“novalidate”
代码中的表单名称是“form”，并且您在跨度的 ng-show 中使用表单名称“myForm”。将其更改为“form.service_id.$error.required”

标签： javascript angularjs

【解决方案1】：

下面的代码 sn-p 给出了一个例子，根据问题中发布的代码，我想制作几个 cmets

将类 .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 属性中用作ng-class="{'has-success': inputform.email.$valid, 'has-error': inputform.email.$invalid}"

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

【讨论】：

【解决方案2】：

尝试为 $pristine 添加额外的签到：

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

【讨论】：

【解决方案3】：

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

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 函数以供进一步使用。

【讨论】：