<select> 上的 AngularJS 验证，带有提示选项答案

【问题标题】：AngularJS Validation on <select> with a prompt option<select> 上的 AngularJS 验证，带有提示选项
【发布时间】：2014-01-18 11:34:50
【问题描述】：

我有以下代码用于在 Bootstrap 中设置样式的选择下拉输入。

<select class="form-control" name="businessprocess" ng-model="businessprocess" required>
    <option value="">-- Select Business Process --</option>
    <option value="C">Process C</option>
    <option value="Q">Process Q</option>
</select>

在用户能够提交此表单之前，他或她必须选择一个业务流程。

所以我将required 指令放在select 语句中，但是因为第一个选项标记有-- Select Business Process -- 仍然算作选定选项，因此满足了所需的标志，因此表单验证即使没有选择实际的业务流程。

我该如何解决这个问题？

谢谢。

【问题讨论】：

您能否创建一个带有链接属性的属性指令，该指令将为 onchange 事件 ant 设置一个侦听器并在那里验证内容？

标签： validation angularjs select

【解决方案1】：

这种方法可以/应该解决您的问题：

1) 在你的范围内声明选项：

$scope.processes = [
    { code: "C", name: "Process C" },
    { code: "Q", name: "Process Q" }
];

并且 2) 使用这个声明：

<select class="form-control" name="businessprocess" ng-model="businessprocess" required
    ng-options="c.code as c.name for c in processes" >
    <option value="">-- Select Business Process --</option>
</select>

这里的诀窍实际上是，在角度周期内，首先会解决当前值不在processes 选项中的问题。因此，默认设置为：

<option value="">-- Select Business Process --</option>

和required 将按预期工作(more details)

【讨论】：

这都是关于在您的 HTML 中使用空

【解决方案2】：

你可以在控制器中初始化选择器的值：

<select class="form-control" name="businessprocess" ng-model="businessprocess">
    <option value="A">-- Select Business Process --</option>
    <option value="C">Process C</option>
    <option value="Q">Process Q</option>
</select>

在控制器中：

$scope.businessprocess = "A" ;

或“C”、“Q”，随心所欲，因此选择始终具有价值。我认为您在选择中不需要“必需”。

如果你不想要一个初始化值。当用户不选择它时也会做一些额外的效果。

<select class="form-control" name="businessprocess" ng-model="businessprocess" myRequired>
    <option value="">-- Select Business Process --</option>
    <option value="C">Process C</option>
    <option value="Q">Process Q</option>
</select>

然后编写指令：

model.directive("myRequired", function() {
    return {
        restrict: 'AE',
        scope: {},
        require: 'ngModel',
        link: function(scope, iElement, iAttrs) {
                if(iElement.val() == ""){
                    //do something
                    return;
                } else {
                    //do other things
                }
            });
        }
    };
});

【讨论】：

我明白了，但我故意希望用户选择一些东西。我不希望那里有默认值。
我已经重新编辑了我的答案，希望对你有用。

【解决方案3】：

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);
          });
      }
    };
  });

【讨论】：

【解决方案4】：

最好的方法是使用：

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>

【讨论】：

【解决方案5】：

您可以尝试添加表单，例如：

HTML

<div ng-app="myApp" ng-controller="MyCtrl">
     <form name="mainForm">
    <select name="businessprocess" ng-model="businessprocess"  required>    
        <option value="">-- Select Business Process --</option>
        <option ng-repeat="v in processes" value="{{v.id}}">{{v.value}}</option>
    </select>
    <span class="error" ng-show="mainForm.businessprocess.$error.required">required</span>
</form>
</div>

js

angular.module('myApp', []);

function MyCtrl($scope, $timeout) {
   $scope.processes = [{
        id: "C",
        value: "Process C"
    }, {
        id: "Q",
        value: "Process Q"
    }];
}

演示Fiddle

【讨论】：

【解决方案6】：

使用下面的代码sn-p

<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>

【讨论】：

【解决方案7】：

将“禁用”添加到第一个选项：

<select class="form-control" name="businessprocess" ng-model="businessprocess" required>
<option value="" disabled>-- Select Business Process --</option>
<option value="C">Process C</option>
<option value="Q">Process Q</option>

【讨论】：

【解决方案8】：

这对我有用。除非用户选择“选择...”以外的任何其他值，否则表单无效

<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>

【讨论】：

【解决方案9】：

也许这段代码对此有用...在这种情况下，表单称为 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>

【讨论】：