Линейный режим не работает в мат-горизонтальный шаговый с отдельными компонентами - PullRequest
Новая
       8

Линейный режим не работает в мат-горизонтальный шаговый с отдельными компонентами

0 голосов
/ 27 ноября 2018

Я пытаюсь разделить компонент каждого шага в mat-horizontal-stepper, как показано на html-странице ниже. 

<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-advertising-type 

<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 

<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>

Проверка по классу компонентов 

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

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

}

Так как линейная функциональность не работает.Я могу перейти к другому компоненту.Как я могу решить это.

1 Ответ

0 голосов
/ 20 февраля 2019

Не уверен, решите ли вы проблему или нет.Установите firstCtrl как пустую строку, чтобы сделать форму действительной все время.Установите null работа для меня.

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

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