线性模式不适用于具有单独组件的 mat-horizontal-stepper答案

【问题标题】：Linear mode is not working in mat-horizontal-stepper with separate components线性模式不适用于具有单独组件的 mat-horizontal-stepper
【发布时间】：2019-04-28 18:46:03
【问题描述】：

我正在尝试将 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>

应用广告类型组件

<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]
    });
  }

}

由于线性功能不起作用。我，能够导航到另一个组件。我该如何解决这个问题。

【问题讨论】：

这方面有什么更新吗？
谁能给出我们如何实现上述目标的答案
你找到解决办法了吗？

标签： javascript angular typescript angular-material angular5

【解决方案1】：

您可以使用 @ViewChild 访问您孩子的组件，并从您父母的 html 访问 孩子的表单，例如：

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>

注意：如果您使用低于 8 的 Angular 版本，则不需要使用 '{ static: false }' 语法。

【讨论】：

这适用于第 2 步和第 3 步，但不适用于第 1 步
这行得通。但是在检查错误后，我得到表达式已更改。我也尝试将表单初始化移动到构造函数。

【解决方案2】：

不确定您是否解决了问题。将 firstCtrl 设置为空字符串将使表单始终有效。设置null 为我工作。

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

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

【讨论】：