Проверьте простые дополнительные входные данные

Question

У меня есть 3 входа и флажок.

Требуются первые 2 ввода, а дата требуется только в том случае, если флажок не установлен.

Проблема в том, что я хочу отключить кнопку отправки, если либо первые 2 ввода недействительны, и мне нужно как-то проверить, если флажок не установлен, мне нужно подтвердить дату, если она отмечена, то я не нужна дата.

Как мне это сделать?

<tr>
  <td><b>NEUE IBAN</b> <i class="required-asterix">*</i></td>
  <td class="form-group">
    <div class="col-xs-7 input-group">
      <span class="input-group-addon"><span><b>DE</b></span></span>
      <input validator="/^(\d *){20}$/" id="newIban" ng-keyup="vm.checkIBAN();" validator-invoke="watch" validator-error="fehlerhafte IBAN-Eingabe" ng-model="vm.NewReferenceAccount.newReferenceNumber" class="form-control" placeholder="Insert a new IBAN" required>
    </div>
  </td>
</tr>
<tr>
  <td><b>KONTOINHABER</b> <i class="required-asterix">*</i></td>
  <td class="form-group">
    <div class="col-xs-7 input-group">
      <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
      <input validator="/^[a-zA-Z ]+$/" validator-error="fehlerhafte KONTOINHABER-Eingabe" validator-invoke="watch" type="text" class="form-control" ng-model="vm.NewReferenceAccount.newAccountNameOwner" placeholder="Insert a new Account owner " required>
    </div>
    </div>
  </td>
</tr>
<tr>
  <td><b>GÜLTIG ab</b> <i class="required-asterix">*</i></td>
  <td>
    <input uib-tooltip="Check if it's current date" type="checkbox" ng-model="vm.NewReferenceAccount.isNotFutureDate" ng-init="vm.NewReferenceAccount.isNotFutureDate = true" />

    <div class="col-xs-7 input-group">
      <date-picker ng-model="vm.NewReferenceAccount.changeDate" uib-tooltip="Select the Change Date" ng-readonly="vm.NewReferenceAccount.isNotFutureDate" date-format="dd-MM-yyyy" date-parser-format="DD-MM-YYYY" required />
    </div>
  </td>
</tr>


  <button type="button" ng-disabled="??????????????????" ng-click="vm.acceptTicket();" uib-tooltip="Accept the ticket" class="btn btn-default btn-hover-success">Weiter&nbsp;<i class="glyphicon glyphicon-ok"></i></button>  

Answer 1

Вы можете использовать событие oninput для проверки первых полей, когда пользователь вводит их, и соответственно отключить / включить кнопку. Вы можете узнать больше об этом событии и о том, как его использовать, здесь .

Для этого флажка вы можете использовать событие onchange, чтобы вы знали, когда пользователь нажимает, выбирает / отменяет его выбор. Подробнее о событии onchange и примерах использования можно найти здесь