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

Posted 2023-03-11

【中文标题】<select> 上的 AngularJS 验证，带有提示选项

【英文标题】：AngularJS Validation on <select> with a prompt option

【发布时间】：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 设置一个侦听器并在那里验证内容？

【参考方案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>