即使綁定的表格無效，如何使 Angular Material Stepper 下一步

Question

我正在使用 Angular 材料步進器制作入門流程。 如果他們選擇使用谷歌創建帳戶，我想要求用戶名，但如果他們選擇創建帳戶的方法，我還想要求 email 和密碼。

  <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 步進器將不允許您前進。 在一種情況下，他們使用谷歌創建帳戶，不需要 email 和密碼，所以我不知道如何在沒有這兩個字段的情況下強制步進器前進。

也許我可以根據他們按下的按鈕動態更改需要哪些字段？ 我也不知道這是否可能。

Answer 1

您可以在調用stepper.next()之前使用stepper.selected.completed = true將步進器設置為已完成。

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

Answer 2

晚了一點，但是 angular 材料的步進器具有linear輸入，禁用線性模式意味着即使表格無效也可以讓用戶繼續前進。 您可以使用綁定打開和關閉它。

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

檢查此https://stackblitz.com/angular/pxgjpxnogqrg?file=app%2Fstepper-overview-example.ts和https://material.ZD18B8624A0F55621DAZFCio/組件