Question

我有一个带有select的表单和一个在验证表单时启用的按钮。它与输入框一起正常工作。然而，$ touch似乎并没有适合select。即使触摸了选择，该按钮也会启用。当触摸选择时，它应该变为无效。它只会变为无效，当我选择一个选项然后选择默认值时，该按钮被禁用。我希望它在触摸选择时工作并且用户指针离开。这是我的HTML：

<form role="form" name="frameVersionEditor" novalidate class="form-horizontal col-md-12">
<div class="row">
    <div class="form-group col-lg-2 col-lg-push-1" ng-class="{'has-error' : frameVersionEditor.distributor.$invalid && frameVersionEditor.distributor.$touched}">
        <label>Distributor</label>
        <select name="distributor" data-ng-model="myDistr" data-ng-options="distributors.key as distributors.value for distributors in distributorOptions" class="form-control" required>
            <option value="">Select Distributor</option>
        </select>
        <span ng-show="frameVersionEditor.distributor.$error.required && frameVersionEditor.distributor.$touched" class="help-block">Please select a distributor</span>
    </div>
</div>
</form>
<button data-ng-click="generate()" ng-disabled="frameVersionEditor.$invalid">Generate</button>

这是我的控制器：

var myApp = angular.module('myApp',[]);

myApp.controller('myController', ['$scope', function($scope) {
      $scope.myDistr = [];
      $scope.distributors =
            [
                {
                    'key': '0',
                    'value': 'A'
                },
                {
                    'key': '1',
                    'value': 'B'
                },
                {
                    'key': '2',
                    'value': 'C'
                }
            ];
      $scope.generate = function() {
      //Do something
      };
}]);

Answer 1

我很久以前就遇到过同样的问题。我通过向select字段添加一些内容以及可能选择的数组的另一个条目来解决它。

首先，您要在可能的选择列表中添加空或无效的选择，最佳位置在[0]位置，您将看到为什么会进一步向下。

vm.distributors = [ "Select Distributor", "A", "B", "C" ];

接下来，您需要为选择字段添加和更新一些Angular Directive。你想要ng-valid来告诉 Angular这里可以接受什么。您还需要指定您使用“选择其他”值开始字段，并且在提交期间选择该值无效。添加名称和ID通常是最佳实践项目。要添加的最后一位是ng-required指令，因为您在表单上使用了novalidate，但要求此表单项更改为有效的内容。最终结果如下：

<div class="form-group col-lg-2 col-lg-push-1" ng-class="{'has-error' : vm.myDistr == vm.distributors[0] && frameVersionEditor.$dirty
    || frameVersionEditor.distributor.$pristine && frameVersionEditor.distributor.$touched}">
      <label>Distributor</label>
      <select data-ng-model="vm.myDistr" id="myDistr" name="myDistr" ng-init="vm.distributors[0]" class="select form-control skinny" ng-required="true"
        data-ng-options="d for d in vm.distributors" ng-valid="vm.myDistr != vm.distributors[0]"></select>
        <p class="required" ng-show="vm.myDistr == vm.distributors[0]">&#42;</p>
        <p class="good" ng-show="vm.myDistr != vm.distributors[0]">&#10004;</p>
      <span ng-show="vm.myDistr == vm.distributors[0] && frameVersionEditor.$dirty || frameVersionEditor.distributor.$pristine
      && frameVersionEditor.distributor.$touched" class="help-block">Please select a distributor</span>

这也被更新以说明最简单的实现（因为你使用0-4作为键，你真的不需要它们，只需使用基本数组）。我还更改了您的代码以符合John Papa's最佳做法，并添加了红色星号（用于无效选择）和绿色复选标记（用于正确选择），这是另一个好的做法（显示成功和失败））对于非英语用户。

您也不需要最初指定的开始选项，因为我的更新处理得很好。

根据要求，这是一个Plunker。

我希望这会有所帮助。

-C§

Answer 2

我编写了这个fiddle，一切似乎都运行良好。

<div ng-app="myApp" ng-controller="myController">
     <h1>Select a Distributor</h1>
    <form name="form" class="form-horizontal col-md-12" novalidate>
        <div class="row">
            <div class="form-group col-lg-2 col-lg-push-1" ng-class="{ 'has-error': form.distributor.$invalid && form.distributor.$touched }">
                <label>Distributor</label>
                <select name="distributor" ng-model="mySelection" ng-options="d.key as d.value for d in myDistr" class="form-control" required>
                    <option value="">Select Distributor</option>
                </select>
                <span ng-show="form.distributor.$error.required" class="help-inline">Please select a distributor</span>
            </div>
        </div>
    </form>
    <hr/><hr/>
    <button class="btn btn-primary" data-ng-click="generate()" ng-disabled="form.$invalid  || form.distributor.$touched">Generate</button>
</div>

我怀疑可能是$touched事件 is not what you think.

如果我错了，请给我一些反馈意见！

angular select $ touch validation

2 个答案: