Angular2 form builder with result of asynchronous

问题:

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;
          },

       );


      }

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

I have also tried

  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)
    })
      },

  );

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

That is

On the form

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

 formGroup expects a FormGroup instance. Please pass one

回答1:

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

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.

Try something like this:

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;

  });

And in the template :

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

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>