ngf-select做了什么以及為什么表單驗證需要它？

Question

我是AngularJS noob。 我試圖實現一個表單，它需要填寫所有輸入字段，包括文件上傳輸入。

完全像第一個例子： 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>

但是這不起作用。 確定按鈕將永遠保持禁用狀態。 我發現如果我將屬性ngf-select=""到文件輸入字段：

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

然后表單按預期工作。 填充userName和userUpload輸入字段時，確定按鈕變為啟用狀態。 我嘗試使用googling ngf-select但找不到滿意的答案。 它是做什么的，為什么表格必須按預期運作？

Answer 1

ngf-select是一個文件上載指令，用於定義選擇文件時發生的情況。

您可以使用ngf-select作為ngf-select="uploadFunction($file)"添加要執行的文件上傳邏輯功能，這將確保文件在用戶從計算機中選擇后自動上傳並且您不會必須單擊上傳按鈕。

ngf-select基本上定義了從計算機中選擇文件時會發生什么。

Answer 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)"

並且它將在更新表單上的驗證后使用will更新范圍:)