selezione angolare $ convalida $

Question

Ho un modulo con select e un pulsante attivato quando il modulo è convalidato. Funziona bene con la casella di input. Tuttavia, il $ toccato non sembra funzionare correttamente per la selezione. Il pulsante è abilitato anche quando si tocca la selezione. Dovrebbe girare invalido quando viene toccata la selezione. Diventa non valido e il pulsante è disabilitato quando seleziono un'opzione, quindi seleziona il valore predefinito. Voglio che funzioni quando viene toccata la selezione e userò il puntatore del mouse. Ecco il mio 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> 

Ecco il mio 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

ho avuto più o meno lo stesso problema a poco tempo fa. L'ho risolto aggiungendo alcune cose al campo di selezione e un'altra voce alla serie di possibili selezioni.

In primo luogo, si desidera aggiungere una selezione vuota o non valida all'elenco delle selezioni possibili, il posto migliore è nello slot [0] e vedrete perché più in basso.

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

Successivamente, è necessario aggiungere e aggiornare alcune direttive angolari per il campo selezionato. Vuoi che la ng-valida per indichi Angolare ciò che è accettabile qui. Devi anche specificare che stai iniziando il campo con un valore "seleziona qualcos'altro" e che non è valido per quel valore da selezionare durante l'invio. L'aggiunta di un nome e di un ID sono generalmente elementi di best practice. L'ultimo bit da aggiungere è la direttiva ng-required, dal momento che hai usato novalidate nel modulo, ma è necessario che questo elemento del modulo cambi in qualcosa di valido. Il risultato finale è qui sotto:

<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> 

Anche questo è stato aggiornato per illustrare l'implementazione più semplice (dal momento che si sta utilizzando come chiavi 0-4, non è realmente bisogno di loro, basta utilizzare un array di base). Ho anche modificato il codice in modo che coincida con le best practice John Papa's e aggiunto in un asterisco rosso (per le selezioni non valide) e un segno di spunta verde (per una selezione corretta), come è un'altra buona pratica (mostrare il successo e il fallimento) nel caso di utenti che non parlano inglese.

Non è inoltre necessaria l'opzione iniziale specificata in origine poiché i miei aggiornamenti gestiscono correttamente.

Su richiesta, qui è un Plunker.

Spero che questo aiuti.

-C§

Answer 2

Ho fatto questa fiddle e tutto sembra funzionare bene.

<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> 

ho il sospetto che forse il $touched evento is not what you think.

Per favore mi dia un feedback se sbaglio!