ERROR TypeError: Cannot read property 'reset' of undefined at SafeSubscriber.settingsServi-CodePudding

I am working a angular 11 project.

I got this error when submit the form. ERROR TypeError: Cannot read property 'reset' of undefined at SafeSubscriber.settingsService.create.subscribe.loading [as _next]

MyComponent.ts

import { NbStepperComponent} from '@nebular/theme';

@ViewChild('settingFormStepper') settingFormStepper: NbStepperComponent;

  this.settingsService.create(formData)
      .subscribe((settings) => {

        this.toastrService.show(' Settings added', { status: 'success', duration: 10000 });

        this.settingsService.resetForm();

        this.settingFormStepper.reset();     // error on this this line
}

.html file

 <nb-card-body *ngIf="!loading" >
    <form [formGroup]="sitesettingForm">
  <nb-stepper #settingFormStepper [disableStepNavigation]="true" orientation="horizontal">

<nb-step> </nb-step>

</nb-stepper>

</form>
</nb-card-body>

what is the mistake I did?

CodePudding user response：

Looks like <nb-stepper> is not rendered when you are trying to call reset(). So, this.settingFormStepper is undefined. Could you provide the whole HTML template? Or, do you have any *ngIf out of <nb-stepper> wrapping it?