即使绑定的表单无效，如何使 Angular Material Stepper 下一步答案

【问题标题】：How to make Angular Material Stepper step next even if the form it is tied to is invalid即使绑定的表单无效，如何使 Angular Material Stepper 下一步
【发布时间】：2019-10-23 20:15:49
【问题描述】：

我正在使用 Angular Material Stepper 制作入职流程。如果他们选择使用 google 创建帐户，我想要求用户名，但如果他们选择创建帐户的方法，我还想要求提供电子邮件和密码。

  <mat-step [stepControl]="createAccountFormGroup" [completed]="createAccountCompleted">
    <form [formGroup]="createAccountFormGroup">
      <ng-template matStepLabel>Create Account</ng-template>
      <h2>Create Your Account</h2>
      <div *ngIf="error" class="error">{{ error }}</div>
      <div>
        <div>
          <div>
            <mat-form-field>
              <mat-label>Name</mat-label>
              <input matInput placeholder="John Doe" formControlName="nameCtrl" required />
            </mat-form-field>
          </div>
          <div>
            <button
              mat-raised-button
              color="secondary"
              class="register-button"
              [disabled]="
                createAccountFormGroup.controls.nameCtrl.status !== 'VALID'"
              (click)="createAccountWithGoogle(stepper, createAccountFormGroup)"
            >
              <span class="fab fa-google google-icon"></span>Sign In With Google
            </button>
          </div>
          <div class="or">Or</div>
        </div>
        <div>
          <div>
            <mat-form-field>
              <mat-label>Email</mat-label>
              <input matInput placeholder="johndoe@email.com" formControlName="emailCtrl" required />
            </mat-form-field>
          </div>
          <div>
            <mat-form-field>
              <mat-label>Password</mat-label>
              <input matInput formControlName="passwordCtrl" required type="password" />
            </mat-form-field>
          </div>
          <div class="error">
            <span *ngIf="(password.dirty || password.touched) && password.invalid">
              Password must be at least 8 characters long with numbers and uppercase and lowercase letters
            </span>
          </div>
          <div>
            <button
              mat-raised-button
              color="primary"
              [disabled]="!createAccountFormGroup.valid || loading"
              type="submit"
              class="register-button"
              (click)="createAccountWithEmail(stepper, createAccountFormGroup)"
            >
              Create Account
            </button>
          </div>
          </div>
        </div>
      </form>
    </mat-step>
  </mat-horizontal-stepper>

创建帐户后，我使用 stepper.next() 进入下一步。问题是如果表单无效，Angular Stepper 将不允许您前进。在一种情况下，他们使用谷歌创建帐户，不需要电子邮件和密码，所以我不知道如何强制步进器在没有这两个字段的情况下继续前进。

也许我可以根据他们按下的按钮动态更改需要哪些字段？我也不知道这是否可能。

【问题讨论】：

标签： angular angular-material

【解决方案1】：

您可以在调用stepper.next() 之前使用stepper.selected.completed = true 将步进器设置为完成。

@ViewChild('stepper', { static: false }) private myStepper: MatStepper;
this.myStepper.selected.completed = true;
this.myStepper.next();

【讨论】：

是的，这是我首先尝试的，但不幸的是它不起作用
这可能是因为您正在链接 [completed]="createAccountCompleted". 将其更改为 completed=false 或将 createAccountCompleted 设置为 true

【解决方案2】：

晚了一点，但是 angular material 的步进器有一个linear 输入，禁用线性模式意味着即使表单无效也让用户继续前进。您可以使用绑定来打开和关闭它。

<mat-horizontal-stepper [linear]="isLinear" #stepper>

检查这个https://stackblitz.com/angular/pxgjpxnogqrg?file=app%2Fstepper-overview-example.ts 和 https://material.angular.io/components/stepper/overview

【讨论】：