2013-03-12 3 views
57

다음은 제 코드입니다. 각도를 사용하여 드롭 다운의 유효성을 검사하고 싶습니다. AngularJS 드롭 다운 필요 확인

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

유효한 수단 :

유효한 값은 아무것도하지만 "서비스 선택"을 할 수 있습니다, 그것은 내 기본값입니다. 다른 ASP.net과 마찬가지로 필드 유효성 검사기가 필요합니다. DefaultValue = "0"(드롭 다운), 여기에서 내 드롭 다운은 서비스에서 바인딩되며 "서비스 선택"을 제외한 다른 모든 값을 선택하려고합니다.

답변

113

당신은 '이름'을 추가해야합니다 다음은 required 속성을 추가 할 필요가, 당신의 드롭 다운 목록에 속성, 그리고 당신은 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> 

컨트롤러 : 여기

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

는 작업 plunker입니다.

+7

이 기능을 사용하려면 select-ng-model이 필요하다는 것을 언급해야합니다. – phikes

+3

올바른, ngOptions에는 ngModel이 필요합니다. – Stewie

+0

이 예제는 매우 유용합니다. 감사합니다. – ddagsan