Question

我正在尝试根据来自http服务的输入加载动态字段表单（它应该提供要加载哪些字段的元数据以及字段的名称和类型等）。因此，一旦我收到带有元数据形式的http响应，我必须在 ngOnInit（）中动态构建formGroup。

当我对这个元数据对象进行硬编码并从数据服务返回Observable时，该组件会在 ngOnInt 中动态构建表单，但是只要我移动调用在http服务生活的数据服务，页面加载似乎发生在http调用响应之前，因此表单不加载字段。我首先在控制台上收到以下错误：

 ERROR Error: formGroup expects a FormGroup instance. Please pass one in.

我观察到最终http-call会响应（比如11毫秒）并且基于.subscribe函数创建了formGroup（现在没有用，因为页面在没有任何字段的情况下呈现为空白）。

 formGroup = {};
 data:Array<FormField>;
 form: FormGroup;
 ngOnInit() {
 // dis --> is the data service
 this.dis.getFieldsData().subscribe(respose=>{
     this.data=respose;
     this.objectProps =
        Object.values(this.data)
        .map(prop => {
          return Object.assign({},{key:prop.name}, prop);
        });
       for(let prop of Object.values(this.objectProps)) {
                     this.formGroup[prop.name] = new FormControl(prop || '', 
                    this.mapValidators(prop.validation));
                   } //below is where the form is assigned the dynamically built  formGroup
                     this.form = new FormGroup(this.formGroup); 
});
 }

Answer 1

您可以使用类似isFormReady布尔变量的内容。所以在你的html中放置*ngIf="isFormReady"然后在你的组件中

this.form = new FormGroup(this.formGroup);
this.isFormReady = true;

Answer 2

您可以在init：FormGroup

上创建空this.form = new FormGroup({});

然后在事件传递时使用控件动态填充此表单：

this.form.addControl('some-key', new FormControl(''));

加载动态Reactive Forms，不等待http调用完成

2 个答案: