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>

Answer 2

您可以使用 [canExit]或[canEnter] 查看文档以获取有关此信息的信息。

如果用户不在当前页面的所有必填字段中输入数据，我不想允许转到下一步

2 个答案: