入力フォームとボタンクリックの変更を監視する方法

Question

<div class="subsection"> 
    <form name="photo"> 
     <div class="item item-divider"> 
      Photo 
     </div> 
     <div class="item item-stacked-label"> 
      <span class="input-label">Store Photo</span> 
      <div class="container"> 
       <img ng-src=""> 
       <div class="action"></div> 
      </div> 
      <div class="action-bar" ng-click="takePhoto()"> 
      <i class="icon ion-ios-camera-outline"></i> 
      Take Picture 
      </div> 
     </div> 
    </form> 
</div> 
<div class="subsection"> 
    <div class="item item-divider"> 
     Address & Location 
    </div> 
    <form name="addr"> 
     <div class="row"> 
      <div class="col col-100"> 
       <label class="item item-input item-stacked-label"> 
        <span class="input-label">Address1</span> 
        <input type="text" ng-model="addr.addr1" required> 
       </label> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col col-100"> 
       <label class="item item-input item-stacked-label"> 
        <span class="input-label">Address2</span> 
        <input type="text" ng-model="addr.addr2" required> 
       </label> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col col-50"> 
       <label class="item item-input item-stacked-label"> 
       <span class="input-label">City/Town/Village</span> 
       <input type="text" ng-model="addr.city" required> 
       </label> 
      </div> 
      <div class="col col-50"> 
       <label class="item item-input item-stacked-label"> 
        <span class="input-label">State</span> 
        <input type="text" ng-model="addr.state" required> 
       </label> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col col-50"> 
       <label class="item item-input item-stacked-label"> 
        <span class="input-label">Pincode</span> 
        <input type="number" ng-model="addr.pin" required> 
       </label> 
      </div> 
     </div> 
     <div class="item item-input item-stacked-label"> 
      <span class="input-label">Store Location</span> 
      <div class="container"></div> 
      <div class="action-bar" ng-click="setLocation()"> 
       <i class="icon ion-ios-location-outline"></i> 
       Set Location 
      </div> 
     </div> 
    </form> 
</div> 

フォームのさまざまなセクションにページャーを使用したマルチステップフォームがあります。各フィールドにはいくつかの入力フィールドとボタンがあります...色を変更したい入力されたフォーム入力の有効性に応じて、私のページャのボタンをクリックします。 $ watchGroupを使用しようとしましたが、成功しませんでした。

Answer 1

オブジェクトにフォームコントローラを割り当てると、$ valid、$ invalidなどのプロパティを使用できます。 https://stackoverflow.com/a/27013197/6081477

それが正常に機能するようなもの。 class pagerのボタンは、ng-classでの使用例を示しています。

<subsection> 
    <form name="forms.photo"> 
    <!-- photo form --> 
    </form> 
</subsection> 

<subsection> 
<form name="forms.addr"> 
    <!-- address form --> 
    </form> 
</subsection> 
<button class="pager" ng-class="{red: forms.photo.$dirty, blue: forms.addr.$valid}"> 
<!-- $scope.forms = {}; on controller init -->