Question

我正在尝试减少代码库中的代码重复，我的HTML中有以下模式：

<card-component>
    <card-header>{{entityFormName}}</card-header>
    <card-body>
        <form (ngSubmit)="onSubmit()" id="formId" [formGroup]="entityForm">
               <!-- <ng-content></ng-content> -->
               <!-- Here I have a bunch of custom form content/formatting -->
        </form>
    </card-body>
    <card-footer>
        <!-- button outside of form -->
        <button type="submit" form="formId" [disabled]="entityForm.invalid || loading">{{submitButtonText}}</button>
        <!-- loading icon spinner -->
    </card-footer>
</card-component>

基本上，我有几个遵循这种模式的CRUD类型形式，我想将它们全部保存在一个单独的组件中，以减少重复。我有一个类似于抽象组件的类，它实现onSubmit()，创建entityForm和控制loading。从这个抽象类扩展的类也将为它们自己的表单实现一些自定义行为。

问题是：如何将entityForm发送到实现此表单的任何组件，以便我可以实际创建它？它甚至可能吗？

或者，我是以错误的方式接近这个吗？也许有更好/不同的模式可以遵循以减少代码重复？

提前谢谢。

Answer 1

我明白了。

在我的表单包装器组件上，我有以下内容：

export class AbstractFormComponent {
  @Input()
  formTitle: string;

  @Input()
  component: any;

  get entityForm(): FormGroup { return this.component.entityForm; }

  get toasterConfig(): ToasterConfig { return this.component.toasterConfig; }

  get submitButtonText(): string { return this.component.submitButtonText; }

  _internalSubmit() {
    this.component.onSubmit();
  }

}

然后，在我的每个自定义表单中，我都可以使用：

<custom-form formTitle="Form Title" [component]="this">
    <!-- form inputs, grid and etc -->
</custom-form>

像这样，我的表单将遵循所需的模式，而内部行为由内部组件控制。

这里有一个警告，我将我的组件设置为any对象，因为我不能将它声明为泛型类型（即AbstractEntityComponent<E extends Entity, S extends Service<E>>）而不使包装器组件通用本身。

尝试减少代码库中的代码重复

1 个答案: