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
      };
}]);

@H_404_9@

<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]">*</p> <p class="good" ng-show="vm.myDistr != vm.distributors[0]">✔</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>

angularjs – angular select $touch validation

猜你在找的Angularjs相关文章