Question

我想验证所需的下拉列表。默认要求仅在值为空或空白时有效（如果我错了，请纠正我）。我希望如果值为“ 未分配 ”，则需要提供错误并使表单无效。

<select name="first" class="select" title="Select Approver" ng-model="applications.first" ng-options="x.id as x.value for x in list1" ng-change="SetToAll(applications.first,'1')" required></select>

使用此我可以显示错误消息，但这确实使表单无效

<span class="error" ng-show="applications.first == 'not assigned'?true:false">Select Approver</span>

解决方案： -

1）如果您想使用 required ，请选中 Shannon Hochkins 解决方案。

<form name="formName">
      <select name="first" class="select" title="Select Approver" ng-model="applications.first" ng-options="x.id as x.value for x in list1" ng-change="SetToAll(applications.first,'1')" required="true">
        <option value="">Not Assigned</option>
      </select>
      <span class="error" ng-show="formName.first.$invalid ?true:false">Select Approver</span>
      <pre>{{formName | json}}</pre>
</form>

他添加了一个空白值为<option value="">Not Assigned</option>的选项。并在select中设置required="true"。这非常有效。

2）使用自定义指令。

app.directive('req', [
       function() {
           var link = function($scope, $element, $attrs, ctrl) {
               var validate = function(viewValue) {
                   var comparisonModel = $attrs.req;
                   var invalid = $attrs.invalid;
                   if (viewValue == invalid) {
                       // It's valid because we have nothing to compare against
                       ctrl.$setValidity('req', false);
                   } else {
                       ctrl.$setValidity('req', true);
                   }
               };
               $attrs.$observe('req', function(comparisonModel) {
                   // Whenever the comparison model changes we'll re-validate
                   return validate(ctrl.$viewValue);
               });
           };
           return {
               require: 'ngModel',
               link: link
           };

       }
   ]);

和你的HTML代码：

<select invalid="not assigned" req={{applications.first}} name="first" class="select" ng-model="applications.first" ng-options="x.id as x.value for x in list1" title="Select Approver" ></select>
<span class="error" ng-show="Step5.first.$error.req">Select Approver</span>

在此，您必须设置invalid="not assigned"或任何值invalid='0'或invalid=' '。在指令中，它与无效属性进行比较，如果值匹配则会显示错误。

Answer 1

将所需的值添加到select元素，然后您可以使用 FORM 对象来检查该字段是否有效。

您还可以使用表单名称访问表单中的字段以检查有效性。如果您想添加＆＃39;默认＆＃39;选项，在下拉菜单中，您可以添加一个空值的选项，该值在技术上在所需的下拉菜单中无效。如果有效，您可以选择隐藏它，以便在选择了正确的选项后用户无法再次选择它。

<form name="formName" ng-controller="testCtrl">
    <select name="first" ng-options="x.id as x.value for x in list1" ng-model="applications.first" required>
        <option value="" ng-hide="formName.first.$valid">Not Assigned</option>
    </select>
    <pre>{{formName.first.$invalid | json}}</pre>
</form>

在控制器内部，设置一些选项：

angular.module('sandbox', []).controller('testCtrl', function($scope) {

  $scope.list1 = [{
    id: 1,
    value: 'apples'
  }, {
    id: 2,
    value: 'oranges'
  }];
});

演示：https://jsfiddle.net/suunyz3e/304/

必需/ ngRequired的自定义指令

1 个答案: