ngf-select 做啥以及为啥需要它来进行表单验证?

Posted

技术标签:

【中文标题】ngf-select 做啥以及为啥需要它来进行表单验证?【英文标题】:What does ngf-select do and why is it needed for form validation?ngf-select 做什么以及为什么需要它来进行表单验证? 【发布时间】:2016-02-28 00:12:21 【问题描述】:

我是 AngularJS 菜鸟。我正在尝试实现一个表单,该表单需要填写所有输入字段,包括文件上传输入。

与第一个 ecample 完全一样: https://angular-file-upload.appspot.com/

所以我创建了一个简单的表单来测试一下:

<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>

但是这不起作用。 OK 按钮将永远保持禁用状态。我发现如果我将属性ngf-select="" 添加到文件输入字段:

<input id="userUpload" ng-model="filename" name="userUpload" required ngf-select="" type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />

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

【问题讨论】:

【参考方案1】:

ngf-select 是一个文件上传指令它定义了当你选择文件时会发生什么。

您可以将要执行的文件上传逻辑函数添加为ngf-selectngf-select="uploadFunction($file)",这将确保文件在用户从计算机中选择后自动上传,您无需单击上传按钮。

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

【讨论】:

【参考方案2】:

角度输入文件存在问题,请参阅下一个小提琴它将帮助您。

jsFiddle

在主控制器中放这个,以将当前范围赋予原型范围:

MyCtrl.prototype.$scope = $scope;

只包含这个原型函数之后

MyCtrl.prototype.setFile = function(element) 
var $scope = this.$scope;
$scope.$apply(function() 
    $scope.filename = element.files[0];
);
;

现在你可以调用输入文件

onchange="MyCtrl.prototype.setFile(this)"

它会在更新表单验证后更新范围:)

【讨论】:

以上是关于ngf-select 做啥以及为啥需要它来进行表单验证?的主要内容,如果未能解决你的问题,请参考以下文章

passport.js 做啥以及我们为啥需要它?

Navigation Drawer - syncState() 做啥以及为啥应该在 onPostCreate() 中调用它?

FormControl 是做啥用的?为啥使用它?应该如何使用?

sys.intern() 做啥以及何时使用?

为啥 Magento 在产品保存时使整页缓存失效实际上使页面未缓存以及由于未缓存而刷新会做啥

GLEW 做啥,我为啥需要它?