带有异步调用结果的Angular2表单生成器 [英] Angular2 form builder with result of asynchronous call

问题描述

我是在异步调用结果之后创建表单的，但是在如何将异步calll的结果传递给表单构建器上遇到了麻烦

Am creating my form following a result of an asynchronous call but am stuck at how i should pass the results of the asynchronous calll to the form builder

这是香港专业教育学院尝试过的

This is what ive tried

export class PerformInspectionPage implements OnInit {
 checklists: any;
 inspectionform: FormGroup;

 ngOnInit(): any {
    this.checklists  = this.onGetItems(); //this is where i fetch the data not sure of
                                        //another way to use.

 let checkinputs: FormArray = new FormArray([]);

 for (let i = 0; i < this.checklists.length; i++) {
   checkinputs.push(
    new FormGroup({
      description:new FormControl(this.checklists[i].item),
      input: new FormControl(''),
      yesradio: new FormControl(''),
      noradio: new FormControl(''),
    })
  )
}

this.inspectionform = this._formBuilder.group({
  inputfileds: this._formBuilder.array(checkinputs.controls)
})

 }

现在，该功能可以获取仍位于同一组件上的项目

Now the function that gets items which is still on the same component

 onGetItems(){

    return this._inspectionService.getChecklists()
       .subscribe(
          res=> {
           this.checklists = res;
          },

       );


      }

当我检查console.log(this.inspectionform)时；它有一个由0个项目组成的数组.我该如何修改以返回异步调用结果

when i check console.log(this.inspectionform); it has an array of 0 items. How do i modify this to return result an asynchronous call

我也尝试过

  return this._inspectionService.getChecklists(this.truckParam)
  .subscribe(
    res=> {
      let checkinputs: FormArray = new FormArray([]);

      for (let i = 0; i < this.checklists.length; i++) {
        checkinputs.push(
       new FormGroup({
          description:new FormControl(this.checklists[i].item),
           input: new FormControl(''),
           yesradio: new FormControl(''),
          noradio: new FormControl(''),
        })
     )
    }

    this.inspectionform = this._formBuilder.group({
       inputfileds: this._formBuilder.array(checkinputs.controls)
    })
      },

  );

问题在于，formbuilder的实例在窗体上永远不可见

The problem with this is that the instance for formbuilder is never visible on the form

那是

在表单上

 <form [formGroup]="inspectionform" #newform > //this returns an error of

 formGroup expects a FormGroup instance. Please pass one

推荐答案

由于您是异步构建表单模型，因此还需要异步显示表单模板

Since you're building the form MODEL asynchronously, you also need to display the form TEMPLATE asynchronously.

当前代码(显示的第二个选项)的问题在于，Angular会在构建模型之前尝试显示表单.

The problem with you current code (the 2nd option you showed) is that Angular tries to display the form BEFORE you have built the model.

尝试这样的事情:

getChecklists(...)

  .subscribe(() => {

    // Build the form model like you currently do.
    this.inspectionForm = this._formBuilder.group({...});

    // Then, set some kind of flag to indicate that the form is ready.
    this.isFormReady = true;

  });

在模板中:

<form *ngIf="isFormReady" [formGroup]="inspectionForm" #newform>

实际上，您也许可以跳过 isFormReady 标志并直接测试 inspectionForm 属性的值:

In fact, you might just be able to skip the isFormReady flag and test the value of the inspectionForm property directly:

<form *ngIf="inspectionForm" [formGroup]="inspectionForm" #newform>

这篇关于带有异步调用结果的Angular2表单生成器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！