Question

我正在尝试将角材料中的stepper component与反应形式一起使用。问题是，从架构的角度来看，我不是允许每个mat-step访问formGroup的最佳方法。

看下面的两个示例，似乎最简单的方法是在步进器外部创建formGroup1和formGroup2（示例1）。这种方法的问题在于，在每个<form>中，我只希望有一个包含其formGroup的自定义组件，并且我认为步进器的容器不应该了解{{1} }。有什么办法可以做到这一点？

formGroups

我考虑过的解决方案：

在步进器的父级中声明所有formGroups并将其传播给子级（缺点：对父级的责任似乎太大了，更难于理解代码）
声明子组件中的每个formGroup并使用<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>发出父对象。在父级内部使用@Output()，以使其对子级逻辑不了解（缺点：需要使用索引/标识符来确保正确的格式位于正确的位置）
在父级中为整个步进使用单个表格

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

Answer 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),
    });
  }

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

1 个答案: