Question

我正在从服务器的json创建动态组件。为此，我使用了官方指南中的示例 https://angular.io/guide/dynamic-component-loader

loadComponent(requiredFields) {
    let bankInput : InputItem;
    let bankItem = requiredFields[0];
    if (bankItem.nature == "text"){
        bankInput = new InputItem(InputTextComponent,bankItem);

    }


    let componentFactory = this.componentFactoryResolver.resolveComponentFactory(bankInput.component);

    let viewContainerRef = this.inputHost.viewContainerRef;
    viewContainerRef.clear();

    let componentRef = viewContainerRef.createComponent(componentFactory);
    (<InputBankComponent>componentRef.instance).data = bankInput.data;


  }

很明显，这是一个仅支持文本的代码段。

一切正常，但是现在我必须将生成的字段提交到服务器。

如何将生成的字段放入表单？有什么更好的方法？

Answer 1

您是否查看了有关forms的官方文档？

您还可以阅读FormBuilder来动态构建表单，这是一个示例（使用已经存在的验证器）：

this.form = this.fb.group({

   Address1: [address.Address1, this.validator.buildAddressValidators()],
   Address2: [address.Address2, this.validator.buildAddressValidators()],
   Address3: [address.Address3, this.validator.buildAddressValidators()],
   Address4: [address.Address4, this.validator.buildAddressValidators()],

   ZipCode: [address.ZipCode, this.validator.buildZipCodeValidators(true)],
   City: [address.City, this.validator.buildCityValidators(true)]
});

Angular 2提交动态组件

1 个答案: