Enable button when form is valid
I want the button that submitted the form to remain enabled only if 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 problem is that the button is in front of the form, so they don't see myForm. $ invalid. If you ask me why I can't put a button inside the form, it's because this button is in the header of the app bar and the form is below.
How can I handle this situation?
+3
source to share
2 answers
You can use the 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>
+4
source to share
You can 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, the 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>
0
source to share