AngularJS Validation on <select> with a prompt option

前端 未结 9 2091
挽巷
挽巷 2021-02-05 11:17

I have the following code for a select drop down input that is styled in Bootstrap.


                        
    
提交评论

  • 2021-02-05 11:34

    Use the following code snippet

    <select class="form-control" name="businessprocess" ng-model="businessprocess">
        <option value="A" disabled selected hidden>-- Select Business Process --</option>
        <option value="C">Process C</option>
        <option value="Q">Process Q</option>
    </select>
    
    0 讨论(0)
  • 2021-02-05 11:36

    Maybe this code, can be usefull for this... in this case the form is called myform

    <select ng-model="selectX" id="selectX" name="selectX"  required>
                                                <option  value="" ></option>
                                                <option  value="0" >0</option>
                                                <option value="1">1</option>
                                              </select>
    
        <span style="color:red" ng-show="myform.selectX.$dirty && myform.selectX.$invalid">
        <span ng-show="myform.selectX.$error.required">Is required.</span>
        </span> 
    
    0 讨论(0)
  • 2021-02-05 11:37

    a best way and straight one is to use:

    HTML

    <select name="businessprocess" ng-model="businessprocess"  required>
            <option selected disabled value="">-- Select Business Process --</option>
            <option ng-repeat="v in processes" value="{{v.id}}">{{v.value}}</option>
    </select>
    
    0 讨论(0)
  • 2021-02-05 11:37

    This works for me. Form is invalid until user selects any other value than "Choose..."

    <select name="country" id="country" class="form-control" formControlName="country" required>
        <option selected value="">Choose...</option>
        <option *ngFor="let country of countries">{{country.country}}</option>
    </select>
    
    0 讨论(0)
  • 2021-02-05 11:40

    JS

    
    
        angular.module('interfaceApp')
      .directive('requiredSelect', function () {
        return {
          restrict: 'AE',
          require: 'ngModel',
          link: function(scope, elm, attr, ctrl) {
    
            if (!ctrl) return;
              attr.requiredSelect = true; // force truthy in case we are on non input element
    
              var validator = function(value) {
                if (attr.requiredSelect && ctrl.$isEmpty(value)) {
                  ctrl.$setValidity('requiredSelect', false);
                  return;
                } else {
                  ctrl.$setValidity('requiredSelect', true);
                  return value;
                }
              };
    
              ctrl.$formatters.push(validator);
              ctrl.$parsers.unshift(validator);
    
              attr.$observe('requiredSelect', function() {
                validator(ctrl.$viewValue);
              });
          }
        };
      });
    
    
    
    0 讨论(0)
  • 提交回复
    热议问题