Question

我正在尝试将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]
    });
  }

}

由于线性功能不起作用。我，能够导航到其他组件。我该怎么解决。

Answer 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}'语法。

Answer 2

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

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

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

线性模式不适用于带有单独组件的水平卧式步进机

2 个答案: