0

I am using a template called mat-stepper in my project and it has services, router and activedroute the problem is that when I put these in the constructor the template is no longer shown, I have been investigating and I see that I should not put them there, but I don't know how to fix it Help, I'm new to this. This is my code:

Component.ts


  public factory:Factory=new Factory()

  firstFormGroup = this._formBuilder.group({
    firstCtrl: ['', Validators.required],
  });
  secondFormGroup = this._formBuilder.group({
    secondCtrl: ['', Validators.required],
  });

  constructor(private _formBuilder: FormBuilder, private factoryService:FactoryService, private router:Router,
    private activateRoute:ActivatedRoute) { }

  ngOnInit(): void {
    this.loadfactory()
  }

  loadfactory():void{
    this.activateRoute.params.subscribe(params=>{
      let id=params['id']
      if(id){
        this.factoryService.getFactory(id).subscribe((factory)=>this.factory=factory)
      }
    })
  }

  public create():void{
    this.factoryService.create(this.factory).subscribe(
      factory=>{
        this.router.navigate(['/factory'])
        Swal.fire('Factory ', `${factory.name} save succes`,'success')
      }
    )
  }
}```

**Html**
``` <mat-stepper #stepper ngNativeValidate (ngSubmit)="create()">
        <mat-step  [stepControl]="firstFormGroup" errorMessage="All fields are required">
          <form [formGroup]="firstFormGroup">
            <ng-template matStepLabel>Enterprise data</ng-template>
            <mat-form-field appearance="fill">
              <mat-label >Name</mat-label>
              <input matInput [(ngModel)]="factory.name" formControlName="firstCtrl" required>
            </mat-form-field>

            <mat-form-field appearance="fill">
              <mat-label>Ciudad</mat-label>
              <input matInput [(ngModel)]="factory.city" formControlName="firstCtrl" required>
            </mat-form-field>
            <mat-form-field appearance="fill">
              <mat-label>Address</mat-label>
              <input matInput [(ngModel)]="factory.address" formControlName="firstCtrl" required>
            </mat-form-field>

            <mat-form-field appearance="fill">
              <mat-label>Phone</mat-label>
              <input matInput [(ngModel)]="factory.phone" formControlName="firstCtrl" required>
            </mat-form-field>

            <mat-form-field appearance="fill">
              <mat-label>Postal Code</mat-label>
              <input matInput [(ngModel)]="factory.postal_code" formControlName="firstCtrl" required>
            </mat-form-field>

            <mat-form-field appearance="fill">
              <mat-label>Email</mat-label>
              <input matInput [(ngModel)]="factory.email" formControlName="firstCtrl" required>
            </mat-form-field>

            <mat-form-field appearance="fill">
              <mat-label>Description</mat-label>
              <textarea matInput [(ngModel)]="factory.description" required></textarea>
            </mat-form-field>
            <div>
              <button mat-button matStepperNext>Next</button>
            </div>
          </form>
        </mat-step>
        <mat-step [stepControl]="secondFormGroup" errorMessage="All fields are required.">
          <form [formGroup]="secondFormGroup">
            <ng-template matStepLabel>Person in charge</ng-template>
            <mat-form-field appearance="fill">
              <mat-label>Name</mat-label>
              <input matInput formControlName="secondCtrl"
                     required>
            </mat-form-field>

            <mat-form-field appearance="fill">
              <mat-label>Last Name</mat-label>
              <input matInput  formControlName="secondCtrl"
                     required>
            </mat-form-field>

            <mat-form-field appearance="fill">
              <mat-label>Email</mat-label>
              <input matInput formControlName="secondCtrl"
                     required>
            </mat-form-field>

            <mat-form-field appearance="fill">
              <mat-label>Address</mat-label>
              <input matInput formControlName="secondCtrl"
                     required>
            </mat-form-field>

            <mat-form-field appearance="fill">
              <mat-label>Phone</mat-label>
              <input matInput formControlName="secondCtrl"
                     required>
            </mat-form-field>
            <div>
              <p>Before saving, check that the data is correct.</p>
              <button mat-button matStepperPrevious>Back</button>
              <button mat-button matStepperNext>Next</button>
            </div>
          </form>
        </mat-step>
        <mat-step>
          <ng-template matStepLabel>Terminate</ng-template>
          <p>Thank you</p>
          <div>
            <button mat-button matStepperPrevious>Back</button>
            <button mat-button (click)="stepper.reset()">Delete</button>
            <button id="submit" mat-raised-button type="submit" color="primary">Save</button>
          </div>
        </mat-step>
      </mat-stepper>```
  • Did you import RouterModule in your module? – Eli Porush Sep 13 '22 at 06:02
  • Please trim your code to make it easier to find your problem. Follow these guidelines to create a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). – Community Sep 13 '22 at 13:17

0 Answers0