title: How to make Angular Material Stepper step next even if the form it is tied to is invalid
body: <p>I am making an onboarding flow using the Angular Material Stepper. I want to require the users name if they choose to create an account using google but i want to also require an email and password if they choose that method of creating an account.</p>
  
  <pre><code>  &lt;mat-step [stepControl]="createAccountFormGroup" [completed]="createAccountCompleted"&gt;
      &lt;form [formGroup]="createAccountFormGroup"&gt;
        &lt;ng-template matStepLabel&gt;Create Account&lt;/ng-template&gt;
        &lt;h2&gt;Create Your Account&lt;/h2&gt;
        &lt;div *ngIf="error" class="error"&gt;{{ error }}&lt;/div&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;div&gt;
              &lt;mat-form-field&gt;
                &lt;mat-label&gt;Name&lt;/mat-label&gt;
                &lt;input matInput placeholder="John Doe" formControlName="nameCtrl" required /&gt;
              &lt;/mat-form-field&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;button
                mat-raised-button
                color="secondary"
                class="register-button"
                [disabled]="
                  createAccountFormGroup.controls.nameCtrl.status !== 'VALID'"
                (click)="createAccountWithGoogle(stepper, createAccountFormGroup)"
              &gt;
                &lt;span class="fab fa-google google-icon"&gt;&lt;/span&gt;Sign In With Google
              &lt;/button&gt;
            &lt;/div&gt;
            &lt;div class="or"&gt;Or&lt;/div&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;div&gt;
              &lt;mat-form-field&gt;
                &lt;mat-label&gt;Email&lt;/mat-label&gt;
                &lt;input matInput placeholder="johndoe@email.com" formControlName="emailCtrl" required /&gt;
              &lt;/mat-form-field&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;mat-form-field&gt;
                &lt;mat-label&gt;Password&lt;/mat-label&gt;
                &lt;input matInput formControlName="passwordCtrl" required type="password" /&gt;
              &lt;/mat-form-field&gt;
            &lt;/div&gt;
            &lt;div class="error"&gt;
              &lt;span *ngIf="(password.dirty || password.touched) &amp;&amp; password.invalid"&gt;
                Password must be at least 8 characters long with numbers and uppercase and lowercase letters
              &lt;/span&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;button
                mat-raised-button
                color="primary"
                [disabled]="!createAccountFormGroup.valid || loading"
                type="submit"
                class="register-button"
                (click)="createAccountWithEmail(stepper, createAccountFormGroup)"
              &gt;
                Create Account
              &lt;/button&gt;
            &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/mat-step&gt;
    &lt;/mat-horizontal-stepper&gt;
  </code></pre>
  
  <p>after the account is created i am using stepper.next() to move to the next step. The problem is that the Angular Stepper wont allow you to step forward if the form is invalid. In one scenario, where they create the account with google, the email and password are not needed and so i dont know how to force the stepper to move forward without those two fields.</p>
  
  <p>maybe i can dynamically change which fields are required depending on what button they press? I dont know if that is possible either.</p>