验证的 AngularJS 指令-6ren"> 验证的 AngularJS 指令-我正在尝试使指令能够处理 内的验证鉴于 AngularJS 不支持此...它可以检查是否选择了文件,但我也有一个 在表单中,因此当我选择一个文件时,表单会获取状态 $valid=true,但只需输-6ren">
gpt4 book ai didi

javascript - 用于 <input type ="file"> 验证的 AngularJS 指令

转载 作者:行者123 更新时间:2023-12-03 00:42:36 28 4
gpt4 key购买 nike

我正在尝试使指令能够处理 <input type="file"> <form> 内的验证鉴于 AngularJS 不支持此...它可以检查是否选择了文件,但我也有一个 <textarea>在表单中,因此当我选择一个文件时,表单会获取状态 $valid=true,但只需输入 <textarea>使表单变为 $valid=false 即使我没有为 <textarea> 设置验证。为什么会出现这种情况?我该如何修复它?这是一个简单的例子来说明这个问题:

<小时/>

我的 app.js 文件:

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

app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});



app.directive('validFile', function () {
return {
restrict: "A",
require: '^form',

link: function (scope,elem,attrs, ctrl) {

elem.bind("change", function(e) {
console.log("change");
scope.$apply(function(){
ctrl.$valid=true;
ctrl.$invalid=false;
});
});

}
};
});

我的index.html文件:

    <!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-form="myForm" >
<input ng-model="filename" valid-file required type="file"/>
<button ng-disabled="myForm.$invalid" type="submit" class="btn btn-primary"><i class="icon-white icon-ok"></i>&nbsp;Ok</button>
<div >
<textarea name="observations" rows="3" cols="50" ng-model="observations"></textarea>
</div>
<p>
Input is valid: {{myForm.$valid}} Input is invalid: {{myForm.$invalid}}
<br>Selected file: {{filename}}
<br>Area is valid: {{myForm.observations.$valid}} Area is invalid: {{myForm.observations.$invalid}}
</p>
</div>
</body>
</html>

我刚才所说的有一个有效的 plnkr: http://plnkr.co/edit/k3KZpdX5q3pelWN21NVp?p=preview

最佳答案

一个快速的技巧就是像这样将文本区域从 ng-form 中取出 -

<div ng-form="myForm">
<input id="userUpload" ng-model="filename" archivo-valido
name="userUpload" required type="file"
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
</div>
<button ng-disabled="myForm.$invalid" type="submit" class="btn btn-primary">
<i class="icon-white icon-ok"></i>&nbsp;Ok
</button>

问题是Form在开始时无效,但您只需在更改时强制该值为true 。一旦您在 textarea 中写入内容,Form 就会恢复到其原始 false 值。我不明白你的指令中的代码 -

ERRONEOUS

 scope.$apply(function(){
if(true){ // will always evaluate to true. Why the else part then?
ctrl.$valid=true;
ctrl.$invalid=false;
}else{
ctrl.$valid=false;
}
});

更好的方法是写 Custom Validators在你的每个 ngModel 上都是这样的 -

app.directive('archivoValido', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
ctrl.$validators.archivoValido = function(modelValue, viewValue) {
if (ctrl.$isEmpty(modelValue)) {
// consider empty models to be valid
return true;
}
// your custom validation here
...
// it is invalid
return false;
};
}
};
});

关于javascript - 用于 &lt;input type ="file"> 验证的 AngularJS 指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53384807/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com