Я не хочу разрешать переходить к следующему шагу, если пользователь не вводит данные во все поля Обязательные на текущей странице

Question

При переходе от одного шага к другому шагу мы должны проверить поля текущего шага. Но это валидация всех шагов полей. Как мы можем проверить поля текущего шага вместо всех полей?

Я использую Angular 4 с Reactive Form, я использую angular-archwizard для создания многошаговой формы, в настоящее время он позволяет мне перейти к следующему шагу, не вводя все значения обязательного поля, я не хочу этого разрешать, Я хочу перейти к следующему шагу, если я ввел значение во все обязательные поля,

как я могу это сделать ???

Ниже моя форма

<aw-wizard>
  <aw-wizard-step stepTitle="Title of step 1">
  <input type="text" formControlName="BillingAddressLine1" class="form-control" 
    [(ngModel)]="billingAddressLine1">
    <button type="button" awNextStep>Next Step</button>
    <button type="button" [awGoToStep]="{stepIndex: 2}">Go directly to third Step</button>
  </aw-wizard-step>
  <aw-wizard-step stepTitle="Title of step 2" awOptionalStep>
    Content of Step 2
    <button type="button" awPreviousStep>Go to previous step</button>
    <button type="button" awNextStep>Go to next step</button>
  </aw-wizard-step>
  <aw-wizard-step stepTitle="Title of step 3">
    Content of Step 3
    <button type="button" awPreviousStep>Previous Step</button>
    <button type="button" (click)="finishFunction()">Finish</button>
  </aw-wizard-step>
</aw-wizard>

Я хочу, чтобы пользователю не разрешалось переходить к следующему шагу, пока он не введет значение BillingAddressLine1, поскольку это поле является обязательным

Answer 1

Ну, тогда вам нужно привязать его к действительности формы:

<button
  type="button"
  awNextStep
  [disabled]="yourFormName.status === 'INVALID'">Go to next step</button>