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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 17:02:25  来源:igfitidea点击:

What does ngf-select do and why is it needed for form validation?

javascripthtmlangularjsformsng-file-upload

提问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 userNameand userUploadinput fields are filled. I tried googling ngf-selectbut couldn't find a satisfactory answer. What does it do and why is it necessary for the form to function as expected?

然后表单按预期工作。当userNameuserUpload输入字段都被填充时,确定按钮变为启用。我尝试谷歌搜索,ngf-select但找不到满意的答案。它有什么作用,为什么表单必须按预期运行?

采纳答案by Jose Rocha

There is a problem with input files in angular see the next fiddle it will help you.

angular 中的输入文件有问题,请参阅下一个小提琴,它将为您提供帮助。

jsFiddle

js小提琴

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-selectas 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-selectngf-select="uploadFunction($file)"这将确保一旦通过电脑从用户选择的,你不必点击上传按钮,将文件自动上传。

ngf-selectbasically defines what happens when you select a file from your computer.

ngf-select基本上定义了当您从计算机中选择文件时会发生什么。