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??
<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>
You can both try by setting the form including both controls:
<form name="myForm">
<button class="button button-clear button-positive" ng-click="submitForm(data)" ng-disabled="myForm.$invalid">
Salvar
</button>
<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>
Or in cases where you don't want to break the layout or don't need a form, with ng-form directive:
<div class="item item-input-inset" ng-form="myForm">
<button class="button button-clear button-positive" ng-click="submitForm(data)" ng-disabled="myForm.$invalid">
Salvar
</button>
<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>