Подтвердить что ты не робот

Angular JS: проверить поля формы перед отправкой

Я создаю приложение Angular JS с двухэтапной формой. Это действительно только одна форма, но использует JavaScript, чтобы скрыть первую панель и показать вторую, когда пользователь нажимает кнопку "Далее" и переходит к шагу 2. Я установил "необходимые" проверки для некоторых полей на шаге 1, но, очевидно, они не проверяются, когда пользователь нажимает кнопку "Далее" ... они проверяются, когда кнопка "отправить" нажата в конце шага 2.

Можно ли указать Angular для проверки этих полей в форме при нажатии кнопки "Далее" ?

4b9b3361

ОТВЕТЫ

Ответ 1

Я предлагаю использовать подформы. AngularJS поддерживает размещение одной формы внутри другой, а действие распространяется по форме ниже в верхнюю;

Вот пример: http://plnkr.co/edit/SruBmlGZZtbwiU8cktAp?p=preview

Вот какой код, чтобы вы могли понять идею:

  <form name='myform' ng-init="step = 1">
    <div ng-show="step==1">
      <h3>Step 1: Enter some general info</h3>
      <div ng-form='step1form'>
        Name: <input ng-model="name" required>
      </div>
      <button ng-disabled="!step1form.$valid" ng-click="step = 2">Next</button>
    </div>

    <div ng-show="step==2">
      <h3>Step 2: Final info</h3>
      <div ng-form="step2form">
          Phone: <input ng-model="phone" required>
      </div>
      <button  ng-click="step = 1">Prev</button>
      <button ng-disabled="!myform.$valid" ng-click="submit()">Submit</button>
    </div>
    <div>
      Validation status:
      <div> Whole form valid? {{myform.$valid}} </div>
      <div> Step1 valid? {{step1form.$valid}} </div>
      <div> Step2 valid? {{step2form.$valid}} </div>
    </div>
  </form>