选择第一个选项时使选择无效

Invalidate select when the first option is selected

本文关键字：选择 无效 选项 第一个      更新时间：2023-09-26

我将通过第一个值验证选择框(ngOption((如果选择了第一个值 - false，如果不是 - true(，我不想在选择框中使用预定义的值，如下所示：

<select id="mainVideo" class="form-control"
      ng-model="qtTestData.mainVideo"
      ng-options="mainVideo for mainVideo in mainVideoSources"
      name="mainVideo"
      required>
   <option value="">-- Please, select a value --</option>
</select>

所以，我有这样的选择框：

<select id="mainVideo" class="form-control" requiredSelect
      ng-model="qtTestData.mainVideo"
      ng-options="mainVideo for mainVideo in mainVideoSources"
      name="mainVideo"
      required>
</select>

我的数组是：

 $scope.mainVideoSources = ['Please, select a value', 'Value1', 'Value2'];

我使用此指令来定义是否选择了第一个值(这意味着用户没有更改该值(

App.directive('requiredSelect', function () {
    return {
        restrict: 'AE',
        require: 'ngModel',
        link: function(scope, element, attributes, ngModel) {
            if (!ngModel) return;
            attributes.requiredSelect = true; 
            var validator = function(value) {
                if ( value != 'Please, select a value' ) { 
                    ngModel.$setValidity('requiredSelect', false);
                    return false;
                } else {
                    ngModel.$setValidity('requiredSelect', true);
                    return true;
                }
            };
            ngModel.$formatters.push(validator);
            ngModel.$parsers.unshift(validator);
            attributes.$observe('requiredSelect', function() {
                validator(ngModel.$viewValue);
            });
        }
    };
});

如果选择了无效值，则应显示的 HTML：

<div class="has-error bg-danger" ng-show="qtTestForm.mainVideo.$error.requiredSelect">
   <p class="text-center">Oops, something wasn't right</p>
</div>

但它不起作用...以及如何以 Angular 的方式重写语句(value != 'Please, select a value')？在 JS 中它是这样的选择.选择索引 == 0

您可以将

数据分为"数据值"和"显示值"：

sources = [{
    value: '',
    label: 'Please select a value'
}, {
    value: 'value1'
}, ...]

，然后使用

<select ng-options="item.value as item.label for item in sources" required ...></select>

让required验证器完成剩下的工作。 无需创建自己的指令。

作为旁注，如果要创建验证指令，请使用ngModelController.$validators(不是$parsers&$formatters(。此外，如果您将其作为强制性要求，则无需检查ngModel状态。

不要使用值数组，而是使用对象数组，如下所示：

$scope.mainVideoSources = [ { "value": 0, "text": "Please, select a value" }, {{ "value": 0, "text": "Value1"}, { "value": 0, "text": "Value2"} ];

@hon2a，原生角度验证效果很好，谢谢。我已经重写了我对$validators的指示。现在看起来

App.directive('requiredSelect', function () {
return {
    restrict: 'AE',
    require: 'ngModel',
    link: function(scope, element, attributes, ngModel) {
        ngModel.$validators.requiredSelect = function(modelValue, viewValue) {
            var value = modelValue || viewValue;
            var requiredSelect = 'Please, select a value'; //TBD.. select first ngOption
            return value != requiredSelect;
        };
    }
};

}(;

它对我有用。

相关文章：