title: Angular Material Mat-Stepper: How to use the same formgroup for multiple steps?
body: <p>This is my form group. I'm using a form group inside another one:</p>
  
  <pre><code>this.shopGroup = this.fb.group({
    _user: [''],
    name: ['', Validators.compose([Validators.required, Validators.maxLength(60)])],
    url_name: [''],
    desc: ['', Validators.compose([Validators.required, Validators.maxLength(600)])],
    photos: [''],
    currency: ['Real'],
    language: ['Português do Brasil'],
    address: this.fb.group({
      zipcode: ['', Validators.compose([Validators.required, Validators.pattern('[0-9]{5}[\-]?[0-9]{3}')])],
      street: ['', Validators.compose([Validators.required, Validators.maxLength(70)])],
      number: [null, Validators.compose([Validators.required, Validators.max(99999)])],
      complement: ['', Validators.maxLength(30)],
      district: ['', Validators.compose([Validators.required, Validators.maxLength(60)])],
      state: ['', Validators.required],
      city: ['', Validators.compose([Validators.required, Validators.maxLength(70)])]
    }),
    status: [true],
    created_at: [new Date()],
    updated_at: [new Date()]
  });
  </code></pre>
  
  <p>Here is template:</p>
  
  <pre><code>&lt;form [formGroup]="shopGroup"&gt;
    &lt;mat-horizontal-stepper [linear]="isLinear" #stepper&gt;
      // Im not sure how to set stepControl
      &lt;mat-step [stepControl]="?"&gt;
          &lt;ng-template matStepLabel&gt;Store Creation&lt;/ng-template&gt;
          &lt;mat-form-field&gt;
            &lt;input matInput placeholder="Nome" formControlName="name"&gt;
          &lt;/mat-form-field&gt;
          ...
          &lt;div&gt;
            &lt;button mat-button matStepperNext type="button"&gt;Next&lt;/button&gt;
          &lt;/div&gt;
      &lt;/mat-step&gt;
      // Im not sure how to set stepControl
      &lt;mat-step formGroupName="address" [stepControl]="?"&gt;
        &lt;ng-template matStepLabel&gt;Configuração do Envio/Frete&lt;/ng-template&gt;
        &lt;mat-form-field&gt;
          &lt;input matInput placeholder="CEP" formControlName="zipcode"&gt;
        &lt;/mat-form-field&gt;
        ...
        &lt;div&gt;
          &lt;button mat-button matStepperPrevious&gt;Back&lt;/button&gt;
          &lt;button mat-button matStepperNext&gt;Next&lt;/button&gt;
        &lt;/div&gt;
      &lt;/mat-step&gt;
      &lt;mat-step&gt;
        &lt;ng-template matStepLabel&gt;Done&lt;/ng-template&gt;
        You are now done.
        &lt;div&gt;
          &lt;button mat-button matStepperPrevious&gt;Back&lt;/button&gt;
        &lt;/div&gt;
      &lt;/mat-step&gt;
    &lt;/mat-horizontal-stepper&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>This is the <code>Angular Material</code> documentation for single forms:</p>
  
  <pre><code>&lt;form [formGroup]="formGroup"&gt;
    &lt;mat-horizontal-stepper formArrayName="formArray" linear&gt;
      &lt;mat-step formGroupName="0" [stepControl]="formArray.get([0])"&gt;
        ...
        &lt;div&gt;
          &lt;button mat-button matStepperNext type="button"&gt;Next&lt;/button&gt;
        &lt;/div&gt;
      &lt;/mat-step&gt;
      &lt;mat-step formGroupName="1" [stepControl]="formArray.get([1])"&gt;
        ...
        &lt;div&gt;
          &lt;button mat-button matStepperPrevious type="button"&gt;Back&lt;/button&gt;
          &lt;button mat-button matStepperNext type="button"&gt;Next&lt;/button&gt;
        &lt;/div&gt;
      &lt;/mat-step&gt;
      ...
    &lt;/mat-horizontal-stepper&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I want to use <code>shopGroup</code> on first step, then use <code>address</code> (group inside shopGroup) on second step. Finally, i want to send <code>shopGroup</code>. I'm aware that I need to set <code>type="button"</code> between steps, and <code>type="submit"</code> on the end, however i'm not sure how to set <code>[stepControl]</code> to move from one step to another one. How to make it work on template (html)?</p>