验证表单内的“输入类型文件”和“下拉选项”（使用 angularjs）可能吗？

Posted 2023-05-09

【中文标题】验证表单内的“输入类型文件”和“下拉选项”（使用 angularjs）可能吗？

【英文标题】：Validation of 'input type file' and 'dropdown options' inside form (using angularjs) Possible?

【发布时间】：2016-01-28 22:34:48

【问题描述】：

我还是个新手，正在学习angularjs，这很有趣也很令人兴奋。我已经处理了以下 plunker 链接。 http://plnkr.co/edit/WiXEVIN6K63O50FhdzO2?p=preview

上面的链接显示了 2 选择选项的验证。如果未选择这些下拉值中的任何一个，则提交按钮将不会处于活动状态。

代码如下所示。

Index.html

<div ng-controller="preOpSelectController">
<form name="form">


  <select ng-model="bar.foo" ng-options="foo as foo for foo in fooarray"  required>
    <option ng-if="fooarray.length > 1" value="" selected>Choose</option>
  </select>


  <select ng-model="bar.foo1" ng-options="foo as foo for foo in fooarray1"  required>
    <option ng-if="fooarray.length > 1" value="" selected>Choose</option>
  </select>
  <input type="submit" ng-disabled="form.$invalid" />


</form>

Script.js

var app = angular.module('preOpSelect', []);

app.controller('preOpSelectController', function($scope, $timeout) 
$scope.bar = ;
$scope.bar1 = ;

$scope.fooarray = [ 1, 2, 3, 4, 5, 6 ];
$scope.fooarray1 = [ 12, 21, 32, 43, 54, 64];

$scope.trigger = function() 
 $timeout(function() 
   $('form.bad select').trigger('change');
 )

);

第二个文件是这个-http://plnkr.co/edit/yya3vMoaTFiONU9wrFVw?p=preview

这显示了如何验证输入类型文件。问题是我需要将此文件与第一个文件合并并将所有三个输入一起显示。即输入类型文件和2个下拉选择。提交按钮才应在选择所有3个文件值时处于活动状态。

我遇到了困难，因为第一个代码的函数在普通控制器文件中，而输入类型文件在指令中。我无法将第一个文件的代码合并到第二个链接的指令中。

有人可以让我在这里帮忙吗？

【问题讨论】：

validFile 指令有什么用？用于验证文件类型或仅检查值

我认为它只是检查文件是否为空。

required 属性为您执行此操作（无论是否选择了文件）

是的，但它提供了 html5 验证弹出窗口。我不想显示 tat 弹出。相反，我想处理一些如果未选择文件将禁用按钮的功能

将 novalidate 属性添加到表单标签以避免此类验证

【参考方案1】：

Harshs 的评论确实帮助我克服了一些障碍。我最终完成了它并将它们合并在一起，它就像一个魅力。 http://plnkr.co/edit/CYnhNUnT6aKdCwB65j5N 请参考上面的plunker。

这是 HTML 代码

 <form name="form" novalidate>

  <input type="file" ng-model="document" valid-file required>
  <select ng-model="activeItem.content" ng-options="foo as foo for foo in contentarray"  required>
    <option ng-if="contentarray.length > 1" value="" selected>Choose</option>
  </select>


  <select ng-model="activeItem.content1" ng-options="foo as foo for foo in content1array"  required>
    <option ng-if="content1array.length > 1" value="" selected>Choose</option>
  </select>
  <input type="submit" ng-disabled="form.$invalid && (!form.$valid && 'invalid' || 'valid')"/>


</form>

脚本文件如下。

var app = angular.module('preOpSelect', []);

app.controller('preOpSelectController', function($scope, $timeout) 
$scope.content = ;
$scope.content1 = ;

$scope.contentarray = [ 1, 2, 3, 4, 5, 6 ];
$scope.content1array = [ 12, 21, 32, 43, 54, 64];

$scope.trigger = function() 
 $timeout(function() 
   $('form.bad select').trigger('change');
 )
   
);


preOpSelect.directive('validFile', function () 
return 
    require: 'ngModel',
    link: function (scope, el, attrs, ngModel) 
        ngModel.$render = function () 
            ngModel.$setViewValue(el.val());
        ;

        el.bind('change', function () 
            scope.$apply(function () 
                ngModel.$render();
            );
        );
    
;
);

PS-如果你想知道为什么我对输入类型文件使用指令，这里是答案 我猜 ngModelController 目前不支持 input type=file。因此这个问题可以通过自定义指令来解决。

谢谢大家。希望它对将来的人也有帮助。

【讨论】：

如果你能解释一下validFile指令的必要性，将会对其他人有所帮助

@Harsh- 谢谢。我用解释更新了答案。请看一看。

在 Angular 的 1.2.12 版本中，它可以在没有指令的情况下工作

哦，这就是我要找的。你能引导我到那个链接吗？我会看看的。谢谢

您可以在您的 plunker plnkr.co/edit/CYnhNUnT6aKdCwB65j5N 上尝试它，只需删除该指令并尝试将该模型绑定到视图上