将 formGroup 传递给 mat-step 的最干净的方法是啥？

Posted 2023-03-13

【中文标题】将 formGroup 传递给 mat-step 的最干净的方法是啥？

【英文标题】：What is the cleanest way to pass a formGroup to a mat-step?将 formGroup 传递给 mat-step 的最干净的方法是什么？

【发布时间】：2019-11-28 05:14:54

【问题描述】：

我正在尝试将 angular-material 中的 stepper component 与反应形式一起使用。问题是我不知道允许每个mat-step 访问formGroup 的最佳方式是什么（从架构的角度来看）。

看下面的两个例子，似乎最简单的方法是在步进器之外创建formGroup1 和formGroup2（例子1）。我对这种方法的问题是，在每个<form> 中，我只希望有一个自定义组件包含它的一个formGroup，而且我认为步进器的容器不应该知道formGroups。有什么方法可以实现吗？

<parent that declares formGroup1>
    <mat-vertical-stepper linear>
      <mat-step [stepControl]="formGroup1">
        <form [formGroup]="formGroup1">
            <component that uses formGroup1></component>
        </form>
      </mat-step>
    <<mat-vertical-stepper>
</parent>

<parent oblivious to formGroup2>
    <mat-vertical-stepper linear>
        <mat-step [stepControl]="formGroup2">
            <form [formGroup]="formGroup2">
                <component declaring formGroup2></component>
            </form>
         </mat-step>
    </mat-vertical-stepper>
</parent>

我考虑过的解决方案：

在 stepper 的父级中声明所有 formGroups 并将它们传播给子级（缺点：似乎父级的责任太大，代码更难理解） 在子组件内声明每个 formGroup 并使用 @Output() 向父组件发出。在父级内部使用FormArray，使其对子逻辑一无所知（缺点：需要使用索引/标识符来确保正确的表单位于正确的位置） 在父级中为整个步进器使用单个表单

我想知道是否有一个好的解决方案。感觉好像我错过了一些非常明显的东西。

【问题讨论】：

为什么不在main中声明整个formGroup，每一步都使用<form [formGroup]="myForm.get('group1')">？，看例子stackblitz.com/edit/angular-vaee8g?file=app/…

【参考方案1】：

我在我们的应用程序中遇到了同样的问题，我使用了@Output() 方法。不知道它是否是最好的，但它工作正常。

父组件html

<mat-step
        [stepControl]="form1"
        label="Step1"
        [completed]="form1?.valid">
      <app-step-one [(form)]="form1"></app-step-one>
    </mat-step>

父组件

form1: FormGroup;

子组件 html

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

子组件~你可以从父类的每一步继承它

  _form: FormGroup;

  @Input()
  get form() 
    return this._form;
  

  @Output()
  formChange = new EventEmitter();
  set form(value) 
    this._form = value;
    this.formChange.emit(this._form);
  

  ngOnInit() 
    this.form = this.fb.group(
      item: new FormControl('', Validators.required),
    );