How do I use form $valid in nav bar?

ionic-v1
1

I would like to use Angular’s form.$valid functionality to automatically enable/disable the “Save” button, which is inside the nav bar. (This is an extremely common pattern in iOS).

You can see I’ve named my form personForm, and calling personForm.$valid functions correctly within <ion-content>. However, it does not work inside <ion-nav-button>. I’m assuming this is because personForm is not in the <ion-nav-button> scope.

I’d really like want to use $valid to automatically enable/disable the header button, rather than hacking my own form validation.

What is the correct way to solve this? Thanks!

<ion-view view-title="Add Person">

  <ion-nav-buttons side="secondary">
    <!--  `personForm.$valid` DOES NOT work here -->
    <button class="button button-clear"
      ng-click="addPerson()"
      ng-disabled="!personForm.$valid">Save</button>
  </ion-nav-buttons>

  <ion-content>

    <!--  `personForm.$valid` DOES work here -->
    {{ personForm.$valid }}
    
    <form name="personForm" novalidate>
      <div class="list">
        <label class="item item-input">
          <span class="input-label">Name</span>
          <input type="text" ng-model="name" required>
        </label>
      </div>
    </form>
  </ion-content>
 </ion-view>
2

hi, did you find a solution for this ?