CODEWITHSUNDEEP
javascriptangulartypescriptangular-materialangular5
San Jaisy
San Jaisy

Reputation: 17128

Linear mode is not working in mat-horizontal-stepper with separate components

I, am trying to separate the component of each step in mat-horizontal-stepper as shown in the below html page.

<mat-horizontal-stepper [linear]="true" #stepper>
  <mat-step [stepControl]="selectAdvType">
    <ng-template matStepLabel>
      <div class="text-center">
        <mat-icon>queue_play_next</mat-icon><br /><span>Select Adv Type</span>
      </div>
    </ng-template>
    <app-advertisement-type></app-advertisement-type>
  </mat-step>
  <mat-step [stepControl]="selectCarAdvType">
    <ng-template matStepLabel>
      <div class="text-center">
        <mat-icon>directions_car</mat-icon><br /><span>Select Car</span>
      </div>
    </ng-template>
    <app-select-car-adv></app-select-car-adv>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>
      <div class="text-center">
        <mat-icon>description</mat-icon><br /><span>Select Features</span>
      </div>
    </ng-template>
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button (click)="stepper.reset()">Reset</button>
    </div>
  </mat-step>
</mat-horizontal-stepper>

app-advertisement-type component

<form [formGroup]="selectAdvType">
    <ng-template matStepLabel>Fill out your name</ng-template>
    <mat-form-field>
        <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
    </mat-form-field>
    <div>
        <button mat-button matStepperNext>Next</button>
    </div>
</form>

app-select-car-adv component

<form [formGroup]="selectCarAdvType">
      <ng-template matStepLabel>Fill out your name</ng-template>
      <mat-form-field>
          <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
      </mat-form-field>
      <div>
          <button mat-button matStepperNext>Next</button>
      </div>
  </form>

Validation on the component class

export class AdvertisementTypeComponent implements OnInit {
  selectAdvType: FormGroup;
  constructor(private _formBuilder: FormBuilder) { }

  ngOnInit() {
    this.selectAdvType = this._formBuilder.group({
      firstCtrl: ['', Validators.required]
    });
  }

}

Since the linear functionality is not working. I, am able to navigate to the other component. How can I solve this.

Upvotes: 2

Views: 8161

Answers (2)

Pedro Bezanilla
Pedro Bezanilla

Reputation: 1365

You could access your child's components using @ViewChild and access the child's form from your parent's html, for example:

parent.component.html

 ...
 <mat-step [stepControl]="myChild.form">
       <my-child #myChild></my-child>
 </mat-step>
 ...

parent.component.ts

...
@ViewChild('myChild', { static: false }) myChild: MyChildComponent;
...

my-child.component.ts

...
public form: FormGroup;
...

my-child.component.html

<form [formGroup]="form">
   ...
</form>

NOTE: You don't need to use '{ static: false }' syntax if you are using Angular version below 8.

Upvotes: 2

Jimmy Lin
Jimmy Lin

Reputation: 1501

Not sure if you solve the problem or not. Set the firstCtrl as empty string will make the form valid all the time. Set null work for me. 

export class AdvertisementTypeComponent implements OnInit {
  selectAdvType: FormGroup;
  constructor(private _formBuilder: FormBuilder) { }

  ngOnInit() {
    this.selectAdvType = this._formBuilder.group({
      firstCtrl: [null, Validators.required]
    });
  }
}

Upvotes: -3

Related Questions