Enable button when form is valid

Question

I Want the button that submit form just stay enabled when the form is valid:

<button class="button button-clear button-positive" ng-click="submitForm(data)" ng-disabled="myForm.$invalid">
  Salvar
</button>

<form name="myForm">
  <label class="item item-input">
    <span class="input-label">Nome</span>
      <input type="text" placeholder="Nome da categoria" ng-model="data.Categoria.name" required>
   </label>
</form>

I think the issue is the button is before form so they are not "seeing" myForm.$invalid. If you ask me why I cant put button inside form, is because this button is on bar header of the app and the form is bellow.

How can I handle this situation??

Answer 1

You can use ng-form directive. ng-form

  <button class="button button-clear button-positive" ng-click="submitForm(data)" ng-disabled="myForm.$invalid">
       Salvar
  </button>

  <div data-ng-form name="myForm">
      <label class="item item-input">
        <span class="input-label">Nome</span>
        <input type="text" placeholder="Nome da categoria" ng-model="data.Categoria.name" required>
    </label>
  </div>