2016-07-17 9 views
3

無効にする際に問題が発生しました投稿ボタンをAngularJSのHTML形式で送信します。以下のシナリオでAngularJSで送信を無効にするにはどうすればよいですか?

シナリオ:

  • 私はHTML選択ボックスすなわちから特定のプロセスを選択しています。私はそれからいくつかの項目を選択すると ダウンリスト
  • をドロップし、下部は再び自動的にあなたがこれらの値を記入したら
  • 、あなたはどちらか提出することができる入力のセット を持って必要な形式で占め ですまたはキャンセル要求

条件:
私は1またはをアップロードする必要があり、リスト内のプロセスがあります他の入力パラメータと共に多くのファイルこれを行うために、私は最初にボタンを使用してファイルを選択し、次に別のボタンを使用してファイルをアップロードするという2つのステップのアプローチを使用しています。このボタンをクリックすると、REST呼び出しが行われ、ファイルが必要なターゲットに送信されます。
これを達成するためにのng-file-uploadディレクティブを使用しています。

問題:
私が最初にすべての必須入力要素が満たされていると、すべての入力の検証がを渡されることを条件に、送信ボタンを無効にするng-disabledを使用していました。今は、ファイルをアップロードする必要があるユースケースにいるときに問題が発生します。ファイルを選択してアップロードすると、HTMLはファイルがすでにターゲットに送信されているため、その要素を空白として扱います。したがって、検証に失敗します。すべての必須入力要素が埋められます!この検証を削除した場合、必須フィールドが空であってもフォームが送信されることが予想されます。

この場合、送信ボタンを無効にするにはどうすればよいですか?

+0

私はこのようなケースで働いていたhaventはしかし、私はあなたには、いくつかの変数には 'true'としてブール値を割り当てることができると思います(と言う$ scope.flag)RESTサービスリターンのようになります。成功応答です。 'ng-submit'関数では、' form。$ valid'が真で、 '$ scope.flag'が真であるかどうかを確認し、フォームを送信します。 –

+0

@ShashankVivek私は実際にそれを試みました。この場合の問題は、form。$ validがfalseになることになります。したがって、ボタンは無効のままです。 – theHeman

答えて

0

@ShashankVivekが言ったようにブール変数を作成します。

アップロードしたファイルが$ scope.uploaded = trueの場合。

ので、あなたのボタンは、この

<button data-ng-disabled="!form.valid && !uploaded">Submit</button> 
+0

ng-disabledとng-disabledの違いは何ですか? – theHeman

+0

@ashhem data-ng-disabledは、ng-disabledと比較してhtml5バリデーターを通過します。 "ng"ではなく "data-ng"を使用する方が良い方法です。 –

関連する問題