在线性 mat-h​​orizo​​ntal-stepper 中使用单独的组件 [英] Using separate components in a linear mat-horizontal-stepper

问题描述

在 Angular 中，是否可以有一个线性步进器，其中各个步骤是单独的组件?例如:

<mat-step [stepControl]="firstFormGroup" label="Some Form"><第一组件></第一组件></mat-step><mat-step [stepControl]="secondFormGroup" label="另一个表单"><第二成分></第二成分></mat-step><mat-step [stepControl]="thirdFormGroup" label="Review"><第三成分></第三成分></mat-step></mat-h​​orizo​​ntal-stepper>

当我尝试此操作时，我在点击 matStepperNext 按钮时收到以下错误:

TypeError: 无法读取未定义的属性无效".

解决方案

改进@eliran-eliassy 答案和@christian-steinmeyer 问题.

Parent.Component.ts

 导出类 ParentComponent 实现 OnInit {isLinear = true;公司信息:FormGroup；构造函数(私有_formBuilder:FormBuilder){}ngOnInit() {this.companyInfo = this._formBuilder.group({});}}

Parent.Component.html

<mat-step [stepControl]=companyInfo"><form [formGroup]="companyInfo"><ng-template matStepLabel>填写你的名字</ng-template><app-company-info></app-company-info></表单><div><button mat-button matStepperNext>Next</button>

</mat-step></mat-h​​orizo​​ntal-stepper>

Child.Component.ts ->这是子表单

导出类 ChildComponent 实现 OnInit {表格:表格组；子窗体:窗体组；构造函数(私有 ctrlContainer:FormGroupDirective，私人 fb:FormBuilder) {}ngOnInit() {this.subForm = this.fb.group({公司名称:[null，[Validators.required]]，numOfEmployees: [null, [Validators.required]]});this.form = this.ctrlContainer.form;this.form.addControl(公司", this.subForm);}}

Child.Component.html

<mat-form-field外观=轮廓"><input matInput placeholder="您的公司名称";formControlName=公司名称"></mat-form-field>

在 stackblitz

In Angular, is it possible to have a linear stepper where the individual steps are separate components? For example:

<mat-horizontal-stepper [linear]="isLinear">
    <mat-step [stepControl]="firstFormGroup" label="Some Form">
        <first-component></first-component>
    </mat-step>
    <mat-step [stepControl]="secondFormGroup" label="Another Form">
        <second-component></second-component>
    </mat-step>
    <mat-step [stepControl]="thirdFormGroup" label="Review">
        <third-component></third-component>
    </mat-step>
</mat-horizontal-stepper>

When I try this, I receive the following error upon hitting the matStepperNext button:

TypeError: Cannot read property 'invalid' of undefined.

解决方案

Improving on @eliran-eliassy answer and @christian-steinmeyer question.

Parent.Component.ts

  export class ParentComponent implements OnInit {

  isLinear = true;
  companyInfo: FormGroup;

  constructor(private _formBuilder: FormBuilder) {

  }

  ngOnInit() {

    this.companyInfo = this._formBuilder.group({
    });

  }

}

Parent.Component.html

<mat-horizontal-stepper [linear]="isLinear" #stepper>
    <mat-step [stepControl]="companyInfo">
        <form [formGroup]="companyInfo">
            <ng-template matStepLabel>Fill out your name</ng-template>
            <app-company-info></app-company-info>
        </form>
        <div>
            <button mat-button matStepperNext>Next</button>
        </div>
    </mat-step>
</mat-horizontal-stepper>

Child.Component.ts -> this is the sub-form

export class ChildComponent implements OnInit {
  form: FormGroup;
  subForm: FormGroup;
  constructor(
    private ctrlContainer: FormGroupDirective,
    private fb: FormBuilder
  ) {}

  ngOnInit() {
    this.subForm = this.fb.group({
      companyName: [null, [Validators.required]],
      numOfEmployees: [null, [Validators.required]]
    });
    
    this.form = this.ctrlContainer.form;
    this.form.addControl("company", this.subForm);
  }
}

Child.Component.html

<div [formGroup]="subForm">
    <mat-form-field appearance="outline">
        <input matInput placeholder="Your Company Name" formControlName="companyName">
  </mat-form-field>
</div>

See this solution on stackblitz

这篇关于在线性 mat-h​​orizo​​ntal-stepper 中使用单独的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！