0

我正在尝试减少代码库中的代码重复，我的 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到实现此表单的任何组件，以便我可以实际创建它？甚至可能吗？

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

先感谢您。

4

1 回答 1

0

我想到了。

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

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>>）而不使包装器组件本身成为泛型。

于 2017-11-08T11:37:59.140 回答