1. ホーム
  2. javascript

[解決済み] ngf-selectの機能とフォームバリデーションに必要な理由は何ですか?

2022-02-17 22:15:31

質問

私はAngularJSの初心者です。私は、ファイルアップロード入力を含むすべての入力フィールドが満たされることを必要とするフォームを実装しようとしていました。

最初のサンプルと全く同じです。 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" />

を実行すると、フォームは期待通りに動作します。OKボタンが有効になるのは userNameuserUpload の入力欄が埋まっている。ググってみると ngf-select が、納得のいく答えが見つかりませんでした。これは何をするもので、なぜフォームが期待通りに機能するために必要なのでしょうか?

どのように解決するのですか?

angularの入力ファイルに問題があります。次のフィドルをご覧ください。

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

でスコープを更新します :) フォームのバリデーションを更新した後です。