angularjs – angular select $touch validation

我有一个带有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
      };
}]);

不久之前,我遇到了同样的问题.我通过在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§

原文链接：https://www.f2er.com/angularjs/141766.html

angularjs – angular select $touch validation

猜你在找的Angularjs相关文章