Как сделать шаг шагового углового материала следующим, даже если форма, к которой он привязан, неверна

Question

Я выполняю входящий поток с помощью углового шагового механизма подачи материала. Я хочу указать имя пользователя, если он решит создать учетную запись с помощью 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 (), чтобы перейти к следующему шагу. Проблема в том, что угловой шагер не позволит вам сделать шаг вперед, если форма недействительна. В одном сценарии, когда они создают учетную запись в Google, электронная почта и пароль не нужны, и поэтому я не знаю, как заставить степпера двигаться вперед без этих двух полей.

возможно, я смогу динамически изменить, какие полятребуются в зависимости от того, какую кнопку они нажимают? Я тоже не знаю, возможно ли это.

Answer 1

Немного опоздал на вечеринку, но шаговый угловой материал имеет вход 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

Answer 2

Вы можете установить шаговый режим, используя stepper.selected.completed = true, перед тем как позвонить stepper.next().

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