angularjs - Angular 选择 $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>

这是我的 Controller :

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

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

首先，您想要将一个空的或无效的选择添加到可能的选择列表中，最好的位置是在 [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§