Angular 4 : Wait the end of http request to initialize form

Question

I want to retrieve a list of objects "listOfArticles" from the back before to call next methods which initialize form and use validators on this list. But in my case, the form is initialized before the end of http request (because of asynchronous method). How to fix it ?

Method of managementArbo.service.ts :

constructor(private http: Http) { }

  getProducts(parametres :string) :Observable<any> {
    console.log("Dans getProducts avec "+parametres);
    let url :string = "http://#####"+parametres;
    let observable :Observable<any> = this.http.get(url).map((res:Response) => res.json());
    return observable;
 }

ngOnInit() method of myForm.ts

ngOnInit() {
    this.getListBdd();
    this.myFormGroup = this.fb.group({
      itemRows: this.fb.array([this.initItemRows()])
    })
}

getListBdd() method of myForm.ts

public getListBdd() {
    this.route.params.subscribe((params: Params) => {
      let subroute = "getRefNumber";
      this.managementArbo.getProducts(subroute)
        .subscribe(
          res => { this.listOfArticles = res; console.log('bdd:' + res); }

          ,
          err => console.log(err),
          () => console.log('getProducts done'));
    });
}

Move that logic into the subscribe callback

user184994
– user184994

2018-07-23 14:48:35 +00:00
Commented Jul 23, 2018 at 14:48 — user184994
– user184994, Commented Jul 23, 2018 at 14:48
Possible duplicate of wait for Http response in angular 2

Amit Chigadani
– Amit Chigadani

2018-07-23 14:50:30 +00:00
Commented Jul 23, 2018 at 14:50 — Amit Chigadani
– Amit Chigadani, Commented Jul 23, 2018 at 14:50
@user184994 Can you develop it a little more?

Josept
– Josept

2018-07-23 14:58:32 +00:00
Commented Jul 23, 2018 at 14:58 — Josept
– Josept, Commented Jul 23, 2018 at 14:58

Amit Chigadani · Accepted Answer · 2018-07-23 15:05:03Z

1

Move all your form initialization code inside subscribe of getListBdd()

public getListBdd() {
    this.route.params.subscribe((params: Params) => {
      let subroute = "getRefNumber";
      this.managementArbo.getProducts(subroute)
        .subscribe(
          res => { 
           this.listOfArticles = res; console.log('bdd:' + res); 

           // create your form here;
           this.myFormGroup = this.fb.group({
                    itemRows: this.fb.array([this.initItemRows()])
            })
         },
          err => console.log(err),
          () => console.log('getProducts done'));
    });
}

answered Jul 23, 2018 at 15:05

Amit Chigadani

29.9k14 gold badges88 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 4 : Wait the end of http request to initialize form

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest