角度选择 $touched 验证

Question

我有一个带有select 的表单和一个在验证表单时启用的按钮。它适用于输入框。但是，$touched 似乎无法正常工作。即使触摸选择，该按钮也会启用。触摸选择时它应该变为无效。当我选择一个选项然后选择默认值时，它只会变为无效并且按钮被禁用。我希望它在触摸选择并使用鼠标指针离开时工作。 这是我的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

我已经编造了这个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.

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

Answer 2

不久前我也遇到了同样的问题。我通过在选择字段中添加一些内容并在可能的选择数组中添加另一个条目来解决它。

首先，您想在可能的选择列表中添加一个空的或无效的选择，最好的位置是在 [0] 插槽中，您会在更下方看到原因。

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

接下来，您需要为您的选择字段添加和更新一些 Angular 指令。您希望 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§