ОШИБКА TypeError: Невозможно прочитать свойство selected из undefined при использовании mat-stepper

Question

Я пытаюсь использовать mat-stepper с включенной линейной опцией, поэтому я пишу этот код

html

<mat-vertical-stepper linear ngClass="{{ 'last-edited-step-' + stepper.selectedIndex }}" labelPosition="bottom" #stepper>
        <mat-step [stepControl]="firstFormGroup">
            <div class="wrap-login100 p-l-55 p-r-55 p-t-70 p-b-20">
                <form class="login100-form validate-form" [formGroup]="firstFormGroup">
                    <ng-template matStepLabel> Renseignez votre sexe </ng-template>
                    <span class="login100-form-title p-b-20">
            Commençez par nous dire de quel sexe vous êtes?
          </span>
                    <div class="inputGroup">
                        <input (change)="changeCheck($event)" type="radio" id="female" value="female" formControlName="gender" required />
                        <label for="female">Je suis une Femme</label>
                    </div>
                    <div class="inputGroup">
                        <input (change)="changeCheck($event)" type="radio" id="male" value="male" formControlName="gender" required />
                        <label for="male">Je suis un Homme</label>
                    </div>


                    <div cols="2" class="row m-b-20 m-t-60">
                        <div class="col-6 p-t-25 m-r-auto">
                            <a [routerLink]="['/auth']" class="">J'ai déja un compte</a>
                        </div>
                        <div class="col-6 m-l-auto">
                            <button class="login100-form-btn" *ngIf="isGenderDefined" (click)="next()" matStepperNext>Suivant</button>
                        </div>
                    </div>

                </form>
            </div>
        </mat-step>
        <mat-step [stepControl]="secondFormGroup">
            <div class="wrap-login100 p-l-55 p-r-55 p-t-70 p-b-20">
                <form class="login100-form validate-form" [formGroup]="secondFormGroup">
                    <ng-template matStepLabel>information de connexion</ng-template>
                    <span class="login100-form-title p-b-20">
            Indiquer votre adresse mail et un mot de passe
          </span>

                    <div class="wrap-input100 validate-input" data-validate="Valid email is required: example@domain.xyz">
                        <input class="input100" type="text" formControlName="email" required />
                        <span class="focus-input100"></span>
                        <span class="label-input100">Email</span>
                    </div>

                    <div class="wrap-input100 validate-input" data-validate="Password is required">
                        <input class="input100" type="password" formControlName="pass" required />
                        <span class="focus-input100"></span>
                        <span class="label-input100">Password</span>
                    </div>

                    <div class="wrap-input100 validate-input" data-validate="Both Password don't match">
                        <input class="input100" type="password" formControlName="conf_pass" required />
                        <span class="focus-input100"></span>
                        <span class="label-input100">Confirm Password</span>
                    </div>

                    <div cols="2" class="row m-b-20 m-t-40">
                        <div class="col-6 m-r-auto">
                            <button class="login100-form-btn-back" matStepperPrevious>Precedent</button>
                        </div>
                        <div class="col-6 m-l-auto">
                            <button class="login100-form-btn" (click)="next()" matStepperNext>Suivant</button>
                        </div>
                    </div>

                </form>
            </div>
        </mat-step>
</mat-vertical-stepper>

И в файле component.ts я ' ve this

import { Component, OnInit, ViewEncapsulation, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { FormBuilder, Validators, FormGroup } from '@angular/forms';
import { MatHorizontalStepper } from '@angular/material/stepper';
import { UserCredentials } from 'src/app/models/userCredentials.model';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class RegisterComponent implements OnInit {

  constructor(private _formBuilder: FormBuilder) { }

  @ViewChild(MatHorizontalStepper, { static: false }) stepper: MatHorizontalStepper;

  isLinear = true;
  isGenderDefined = false;

  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;
  thirdFormGroup: FormGroup;
  fourthFormGroup: FormGroup;
  fifthFormGroup: FormGroup;
  sixthFormGroup: FormGroup;
  seventhFormGroup: FormGroup;
  eigthFormGroup: FormGroup;

  ngOnInit() {
    this.CreateRegisterForm();
  }

  CreateRegisterForm() {
    this.firstFormGroup = this._formBuilder.group({
      gender: ['', Validators.required]
    });
    this.secondFormGroup = this._formBuilder.group({
      email: ['', [Validators.required, Validators.email]],
      pass: ['', [Validators.required, Validators.minLength(5)]],
      conf_pass: ['', [Validators.required]]
    });
    this.thirdFormGroup = this._formBuilder.group({
      nom: ['', [Validators.required, Validators.minLength(3)]],
      prenom: ['', [Validators.required, Validators.minLength(3)]],
      tel: ['', [Validators.required, Validators.minLength(9), Validators.maxLength(9)]]
    });
    this.fourthFormGroup = this._formBuilder.group({
      relationship: ['', []],
    });
    this.fifthFormGroup = this._formBuilder.group({

    });
    this.sixthFormGroup = this._formBuilder.group({
      statutMarital: ['', []],
    });
    this.seventhFormGroup = this._formBuilder.group({
      ADesEnfants: ['', []],
    });
    this.eigthFormGroup = this._formBuilder.group({
      VeusEnfant: ['', []],
    });
  }

  get gender() { return this.firstFormGroup.controls.gender.value; }
  get email() { return this.secondFormGroup.controls.email.value; }
  get pass() { return this.secondFormGroup.controls.pass.value; }
  get conf_pass() { return this.secondFormGroup.controls.conf_pass.value; }

  next() {
    this.stepper.selected.completed = true;
    this.stepper.next();
  }

  changeCheck(e) {
    this.isGenderDefined = !e.checked;
  }

}

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

ERROR TypeError: Cannot read property 'selected' of undefined
    at RegisterComponent.next (register.component.ts:76)
    at RegisterComponent_button_22_Template_button_click_0_listener (register.component.html:25)
    at executeListenerWithErrorHandling (core.js:21697)
    at wrapListenerIn_markDirtyAndPreventDefault (core.js:21746)
    at HTMLButtonElement.<anonymous> (platform-browser.js:934)
    at ZoneDelegate.invokeTask (zone-evergreen.js:400)
    at Object.onInvokeTask (core.js:41249)
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Zone.runTask (zone-evergreen.js:168)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:481)

Я сделал некоторый поиск по этому поводу и в по этой ссылке https://github.com/angular/components/issues/12578 кажется, что проблема указана c с использованием ViewChild (), но я не знаю, как решить эту ошибку.

Answer 1

selected: any; дюймы до начала строительства