AngularJS，如何在选择>选项上使用min=“”来验证表单

AngularJS, how to use min="" on select > options to validate form?

本文关键字：min 表单 验证 选项 选择 AngularJS      更新时间：2023-09-26

例如，假设我有以下代码：

<form name="myForm">
<select id="mySelect" required min="1" ng-model="foo">
  <option value="0">Zero</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<button>My Button would go here</button>
</form>

正如您可能知道的那样，我的目标是确保如果选择了选项零，则表单无效（因为最小数字为 1）。但是，由于某种原因，这不起作用。如何看到 min=" 适用于这些值？

而且，不，就我而言，我无法取出零选项，我需要对其进行验证。

提前致谢

您能否保留选项"零"但没有值，"必需"属性会捕获该值？

<form name="myForm">
<select id="mySelect" required ng-model="foo">
  <option value="">Zero</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<button>My Button would go here</button>
</form>

如果您不能使用 value=" 并且像 Nicholas Smith 的答案一样需要，那么您也可以使用

 ng-required="foo > 0"

我认为这里最好的方法是添加一个自定义验证指令，以使用<select>元素扩展ngMin的范围：

yourModule.directive('selectMin', function () {
  return {
    restrict: 'A',
    require: 'ngModel',
    scope: {
      ngMin: '='
    },
    link: function ($scope, $element, $attrs, ngModelController) {
      ngModelController.$validators.min = function (value) {
        if (value) {
          return value >= $scope.ngMin;
        }
        return true;
      };
    }
  };
});

用法：

<select id="mySelect" required select-min ng-min="1" ng-model="foo">
  <option value="0">Zero</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
相关文章：