时间戳

首页 > 解决方案 > 如果用户没有在当前页面的所有必填字段中输入数据，我不想允许进入下一步

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

问题描述

在从一个步骤移动到另一个步骤时，我们必须验证当前步骤字段。但它验证所有步骤字段。我们如何验证当前步骤字段而不是所有字段？

我正在使用带有反应表单的 Angular 4，我正在使用 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 的值，因为此字段是必需的

标签： angularangular2-formsangular-reactive-formsangular-formsangular-validation

解决方案

那么你需要将它与表单有效性联系起来：

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

推荐阅读