Question

我有一个内置于Angular 7中的库自定义窗体组件。每个组件都包装在本地input，textarea，checkbox元素上。我已经实现了ValueAccessor，以使其与ngModel和formControl / formControlName一起使用。在声明式使用的情况下，一切正常。

例如。

<custom-textbox label="Name" required formControlName="name"></custom-textbox>

在我的用例中，我必须从JSON动态创建自定义表单组件，并且已经使用ComponentFactoryResolver来完成该任务。我的问题是，当我动态创建这些自定义表单组件时，如何向其应用formControlName指令。任何帮助将不胜感激。

Answer 1

假设您的JSON看起来像...

main()

我们通过迭代数组中的字段来构建表单：

myJson = [
  {
    ctrl: 'field1'
  },
  {
    ctrl: 'field2'
  }
];

然后，我们可以使用angular提供的this.myForm = this.fb.group({}) this.myJson.forEach(x => { this.myForm.addControl(x.ctrl, this.fb.control('')); });管道来迭代表单控件，并通过keyvalue传递表单控件

ctrl.key

另一种选择是跳过该组件，并完全采用动态形式：https://angular.io/guide/dynamic-form

这应该可以帮助您入门，希望对您有所帮助！：）

将formControlName指令附加到以编程方式创建的组件

1 个答案: