javascript ngf-select 有什么作用,为什么表单验证需要它?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/33912536/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What does ngf-select do and why is it needed for form validation?
提问by Kaarel Purde
I am AngularJS noob. I was trying to implement a form, that requires all input fields to be filled including the file upload input.
我是 AngularJS 菜鸟。我试图实现一个表单,它需要填写所有输入字段,包括文件上传输入。
Exactly like the first ecample: https://angular-file-upload.appspot.com/
与第一个 ecample 完全一样:https://angular-file-upload.appspot.com/
So I created a simple form to test this out:
所以我创建了一个简单的表单来测试这个:
<form name="myForm">
<input id="userUpload" ng-model="filename" name="userUpload" required type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
<input id="userName" ng-model="username" name="name" required type="text" />
<button ng-disabled="myForm.$invalid" class="btn btn-primary">Ok</button>
</form>
However this doesn't work. The OK button will forever stay disabled. I discovered that if I add the attribute ngf-select=""
to the file input field:
然而这行不通。确定按钮将永远处于禁用状态。我发现如果我将属性添加ngf-select=""
到文件输入字段:
<input id="userUpload" ng-model="filename" name="userUpload" required ngf-select="" type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
then the form works as expected. OK button becomes enabled when both userName
and userUpload
input fields are filled. I tried googling ngf-select
but couldn't find a satisfactory answer. What does it do and why is it necessary for the form to function as expected?
然后表单按预期工作。当userName
和userUpload
输入字段都被填充时,确定按钮变为启用。我尝试谷歌搜索,ngf-select
但找不到满意的答案。它有什么作用,为什么表单必须按预期运行?
采纳答案by Jose Rocha
There is a problem with input files in angular see the next fiddle it will help you.
angular 中的输入文件有问题,请参阅下一个小提琴,它将为您提供帮助。
in main controller put this, to give the current scope to your prototype scope:
在主控制器中,将当前范围赋予您的原型范围:
MyCtrl.prototype.$scope = $scope;
after just include this prototype function
在只包含这个原型函数之后
MyCtrl.prototype.setFile = function(element) {
var $scope = this.$scope;
$scope.$apply(function() {
$scope.filename = element.files[0];
});
};
now on input files you can call
现在你可以调用输入文件
onchange="MyCtrl.prototype.setFile(this)"
and it will update the scope :) with will after update the validation on form
它将在更新表单验证后更新范围:) with will
回答by goonercooker
ngf-select is a file upload directive which defines what happens when you select the file.
ngf-select 是一个文件上传指令,它定义了当你选择文件时会发生什么。
You can add your file upload logic function to be executed with ngf-select
as ngf-select="uploadFunction($file)"
which would ensure that the file is automatically uploaded once it is selected by the user from the computer and you don't have to click the upload button.
您可以添加与执行文件上传逻辑功能ngf-select
为ngf-select="uploadFunction($file)"
这将确保一旦通过电脑从用户选择的,你不必点击上传按钮,将文件自动上传。
ngf-select
basically defines what happens when you select a file from your computer.
ngf-select
基本上定义了当您从计算机中选择文件时会发生什么。