2013-03-12 22 views
57

Di seguito è riportato il mio frammento di codice. Voglio convalidare il mio menu a discesa usando angolare. AngularJS Dropdown richiesta validazione

<td align="left" width="52%"> 
    <span class="requiredSmall">*</span> 
    <select class="Sitedropdown" style="width: 220px;" 
      ng-model="selectedSpecimen().serviceID" 
      ng-options="service.ServiceID as service.ServiceName for service in services"> 
     <option value="" ng-selected="selected">Select Service</option> 
    </select> 
</td> 

mezzi validi:

valori validi possono essere tutt'altro che "Select Service", è il mio valore di default. Come altri ASP.net Richiedere il validatore di campo DefaultValue = "0" per il menu a discesa, quindi qui Il mio menu a discesa sarà associato ai servizi e desidero selezionare tutti gli altri valori tranne "Seleziona servizio".

risposta

113

È necessario aggiungere un 'nome' attribuiscono alla tua lista a discesa, quindi è necessario aggiungere un attributo required, e quindi è possibile fare riferimento l'errore utilizzando myForm.[input name].$error.required:

HTML:

<form name="myForm" ng-controller="Ctrl"> 

    <select name="service_id" class="Sitedropdown" style="width: 220px;"   
      ng-model="ServiceID" 
      ng-options="service.ServiceID as service.ServiceName for service in services" 
      required> 
    <option value="">Select Service</option> 
    </select> 
    <span ng-show="myForm.service_id.$error.required">Select service</span> 

</form> 

controller:

function Ctrl($scope) { 
    $scope.services = [ 
    {ServiceID: 1, ServiceName: 'Service1'}, 
    {ServiceID: 2, ServiceName: 'Service2'}, 
    {ServiceID: 3, ServiceName: 'Service3'} 
    ]; 
} 

Ecco una plunker lavoro.

+7

È necessario specificare che è necessario che il modello ng funzioni correttamente. – phikes

+3

Corretto, ngOpzioni richiedono ngModel. – Stewie

+0

questo esempio è così utile. grazie. – ddagsan