угловой выбор $ touched validation

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

я был почти такой же вопрос, только короткое время назад. Я решил это, добавив несколько вещей в поле выбора и другую запись в массив возможных выборов.

Прежде всего, вы хотите добавить пустой или недействительный выбор в список возможных выборов, лучшее место в слоте [0], и вы увидите, почему дальше вниз.

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

Затем вам нужно добавить и обновить некоторые угловые директивы для вашего поля выбора. Вы хотите, чтобы ng-valid был tell Угловая, что приемлемо здесь. Вам также необходимо указать, что вы запускаете поле со значением «выбрать что-то еще» и что оно недействительно для этого значения, которое должно быть выбрано во время отправки. Добавление имени и идентификатора - это, как правило, лучшие предметы. Последний бит для добавления - это директива 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.

Пожалуйста, дайте мне обратную связь, если я ошибаюсь!