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

Question

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

当我通过来自数据服务的 Observable 对该元数据对象和 return 进行硬编码时，组件会在 ngOnInt 中动态构建表单，但是，一旦我将数据服务的调用移动到 http 服务，页面加载似乎发生在 http 调用响应之前，因此表单不会加载字段。我首先在控制台上收到以下错误：

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

我观察到 http 调用最终会响应（比如仅需 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

您可以在初始化时创建空 FormGroup：this.form = new FormGroup({});

然后在事件通过时用控件动态填充此表单：

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

Answer 2

您可以使用 isFormReady 布尔变量之类的东西。所以在你的 html 中放 *ngIf="isFormReady" 然后在你的组件中

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

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

Loading dynamic Reactive Forms , doesn't wait for the http call to complete

angular-http

angular

angular-forms

angular-httpclient