Question

我将通过第一个值验证选择框（ngOption）（如果选择了第一个值 - 假，如果不是 - 则为真）并且我不想在选择框中使用预定义值，如下所示：

<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中它就像这样select.selectedIndex == 0

Answer 1

您可以将数据分为“数据值”和“显示值”：

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＆amp; $formatters）。此外，如果您将其作为强制性要求，则无需检查ngModel状态。

Answer 2

使用对象数组代替值数组，如下所示：

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

Answer 3

@ hon2a， Native Angular验证效果很好，谢谢。我已经在$ 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;
        };
    }
};

}）;

它对我有用。

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

3 个答案: