web-dev-qa-db-ja.com

AngularJS：入力フィールドが空のときにボタンを無効にする

ドロップダウンメニュー、2つの入力テキストボックス、送信ボタンがあります。ドロップダウン項目が選択され、両方の入力ボックスが入力されるまで、送信ボタンを無効にしたい。 this one や this one を含むいくつかの例を見てみましたが、どれもうまくいきませんでした。以下は私のコードです。ありがとう

<form name="myForm">
  Select an option:
  <select id="dropDown" name="dropDown" ng-model="data.dropDown" >
    ** content for dropDown menu, populating it by using Django
  </select>
  From Date:
  <input type="text" id="dateFrom" ng-model="data.date1" />
  To Date:
  <input type="text" id="dateTo" ng-model="data.date2"   />

  <button id="submit" ng-click="submitRequest()" ng-disabled="!(!!data.dropDown && !!data.date1  && !!data.date2)">Submit </button>
</form>

以下の方法も試しました：

<form name="myForm">
  Select an option:
  <select id="dropDown" name="dropDown" ng-model="data.dropDown" >
    ** content for dropDown menu, populating it by using Django
  </select>
  From Date:
  <input type="text" id="dateFrom" ng-model="data.date1" required/>
  To Date:
  <input type="text" id="dateTo" ng-model="data.date2" required />
  <button id="submit" ng-click="submitRequest()" ng-disabled="myForm.$invalid">Submit </button>
</form>

したがって、最初にページが読み込まれ、デフォルトですべてのフィールドが空の場合、Submitボタンは無効になり、問題は3つのフィールドすべてに入力した後、有効にならないことです。ありがとう

javascriptjqueryhtmlangularjsforms
6
Parth Bhoiwala

ドロップダウン要素にrequiredを追加すると、2番目の方法（myForm。$ invalidを使用）が機能します。 here で遊べるプランカーを作成しました。

<form name="myForm">
  Select an option:
  <select id="dropDown" name="dropDown" ng-model="data.dropDown" required>
    <option>red</option>
    <option>blue</option>
    <option>green</option>
  </select><br/>
  From Date:
  <input type="text" id="dateFrom" ng-model="data.date1" required/><br/>
  To Date:
  <input type="text" id="dateTo" ng-model="data.date2" required /><br/>
  <button id="submit" ng-click="submitRequest()" ng-disabled="myForm.$invalid">Submit</button>
</form>

注：作業中のAngularのバージョンを指定しなかったため、plunkrでAngular 1.4を使用しました。

編集：OPは、問題はJQueryの日付ピッカーを使用して作成されたと述べました。 angular-uiブーストラップ日付ピッカーの使用を提案できますか？ Plunkerの例 - Angular-UI Bootstrap docs

10
Michael H.

Pristineがテキストボックスに挿入された各変数をチェックするため、なぜng-disabled="myForm.myName.$pristine"を使用しないのですか

小さな例をここで確認してください。 ng元の例

4
Rajesh