Question

我有一个应用程序，其中包含带有一组预定义固定控件的表单（反应式）。
此表单具有通用类的输入绑定，其中 type 实现了一个接口，如下所示：

export interface Interactive {
  getId(): string | number;
  getName(): string;
  getCode(): string;
  getAdditionalProps(): any;
  getDefaultOutputType(): PdfOutputType;
  getOutputTypes(): PdfOutputType[];
  getForm(): any; // <---- NEED to implement this
}

export class InteractiveField<T extends Interactive = InteractiveFieldType> {
  id: number;
  type: T;
  isSelected = false;
  settings: FieldSettings;

  constructor(field: Partial<InteractiveField<T>>, type: T){ ...  }

}

export class SomeField implements Interactive {
  // implementations for interface methods
}

// FORM COMPONENT
export class FieldFormComponent implements OnChanges {

  @Input() field: InteractiveField;
  fieldForm: FormGroup;
  ...
}

我需要能够添加一个方法，该方法将返回一组要添加到预定义表单和模板中的控件。

我想到了获取根注入器（使用将在AppModule的引导程序上对其进行设置的函数）->然后获取一个服务，该服务将使用ComponentFactoryResolver动态创建“附加”表单组件- >将其添加到查看容器（ViewContainerRef）。但是，在这种情况下，我不确定如何定义动态组件的FormGroup并将其控件公开为“初始”（预定义）形式。

您如何建议实施？
预先感谢。

修改：
这是stackblitz-如您所见，有：

InteractiveField（类），它是使用的基类-它具有大小和位置等通用属性，还有一个Type-它实现了示例中的Interactive接口
InteractiveFieldSub和OtherInteractiveFieldType是实现Interactive接口的类型。每个道具都有自己的道具-但它们都使用“道具” InteractiveField

该表单应同时编辑InteractiveField设置（大小，位置和其他设置）以及其type的某些属性-其中每种类型都应提供自己的控件和要添加到表单中的表单“主要”形式。

Angular-动态表单模板和从类派生的控件

0 个答案: