How to watch over for changes in input form and button clicks

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>

I have a multistep form using pager for various sections of the form..each part has some input fields and buttons...i want to change the color of my pager button depending upon the validity of the form input filled and buttons clicked.. I tried using $watchGroup but did not find any success.

Did you try using ng-change? – Karthik RP Aug 23 '16 at 05:20 — Karthik RP, Aug 23 '16 at 05:20
i have posted the html part – Vikram Prasad Aug 23 '16 at 05:36 — Vikram Prasad, Aug 23 '16 at 05:36

score 0 · Accepted Answer · edited May 23 '17 at 12:08

Assign the form controller to an object and you can use the $valid, $invalid etc. properties. See https://stackoverflow.com/a/27013197/6081477

Something like that will properly work. The button with the class pager shows the usage with ng-class by example.

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

How to watch over for changes in input form and button clicks

1 Answers1