IT TIP

AngularJS 드롭 다운 필수 유효성 검사

itqueen 2020. 11. 30. 20:32
반응형

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 Require field validator DefaultValue = "0"for dropdown, 그래서 여기서 내 드롭 다운은 서비스에서 바인딩되며 "Select Service"를 제외한 다른 모든 값을 선택하고 싶습니다.


당신은 추가 할 필요가 name당신은 추가 할 필요가, 당신의 드롭 다운 목록에 속성을 required속성을 한 다음 사용하여 오류를 참조 할 수 있습니다 myForm.[input name].$error.required:

HTML :

        <form name="myForm" ng-controller="Ctrl" ng-submit="save(myForm)" novalidate>
        <input type="text" name="txtServiceName" ng-model="ServiceName" required>
<span ng-show="myForm.txtServiceName.$error.required">Enter Service Name</span>
<br/>
          <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'}
          ];

    $scope.save = function(myForm) {
    console.log('Selected Value: '+ myForm.service_id.$modelValue);
    alert('Data Saved! without validate');
    };
        }

여기에 작동하는 플런 커가 있습니다.

참고 URL : https://stackoverflow.com/questions/15360094/angularjs-dropdown-required-validation

반응형