Кнопка включения, если форма действительна

Я хочу, чтобы кнопка отправки формы оставалась включенной, когда форма действительна:

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

Я думаю, проблема в том, что кнопка находится перед формой, поэтому они не «видят» myForm. $ Invalid. Если вы спросите меня, почему я не могу поместить кнопку внутри формы, это потому, что эта кнопка находится в заголовке панели приложения, а форма находится ниже.

Как я могу справиться с этой ситуацией ??


ionic-framework angularjs
person Daniel Faria    schedule 05.08.2014    source источник
comment
Это не тот случай, когда myForm будет доступен на уровне области действия кнопки, если он такой, как указано выше. если он находится в другом шаблоне, он может быть недоступен.   -  person Chandermani    schedule 05.08.2014
comment
Что не работает? И не могли бы вы объявить форму в заголовке и закрыть ее прямо сейчас? Все ли находится в сфере действия ng-controller?   -  person Acsisr    schedule 05.08.2014
comment
Все ли в одном шаблоне и в одном контроллере .. Я следую вашей идее и помещаю ‹form› в начало страницы, чтобы обернуть кнопку. Если вы зададите ответ, я его приму   -  person Daniel Faria    schedule 05.08.2014

Ответы (2)


arrow_upward
4
arrow_downward

Вы можете использовать директиву ng-form. 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>
person ooozguuur    schedule 05.08.2014

arrow_upward
0
arrow_downward

Вы можете попробовать оба, установив форму, включающую оба элемента управления:

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

Или в тех случаях, когда вы не хотите нарушать макет или вам не нужна форма, с помощью директива ng-form:

<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>
person Miquel    schedule 09.10.2014