title: Angular 2 - How can I pre-populate 3 formgroups on init
body: <p>I have the below code which allows a user to add a new set of fields. But I want the component to render out 3 sets of data on init.</p>
  
  <p>At the moment one set of fields is made via the initRateRow function but how can I make it loop through an httpservice to push it into the "this._fb.group"?</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { FormGroup, FormArray, FormBuilder, Validators } from '@angular/forms';
  
  @Component({
    selector: 'app-exchange-rates',
    templateUrl: './exchange-rates.component.html',
    styleUrls: ['./exchange-rates.component.scss']
  })
  export class ExchangeRatesComponent implements OnInit {
  
      public myForm: FormGroup;
  
      constructor(private _fb: FormBuilder) { }
  
      ngOnInit() {
          this.myForm = this._fb.group({
              rates: this._fb.array([
                  this.initRateRow(),
              ])
          });
      }
  
      initRateRow() {
          return this._fb.group({
              rateUnit: ['24', Validators.required],
              currencyFrom: ['GBP', Validators.required],
              currencyTo: ['USD', Validators.required]
          });
      }
  
      blankRateRow() {
          return this._fb.group({
              rateUnit: ['', Validators.required],
              currencyFrom: ['', Validators.required],
              currencyTo: ['', Validators.required]
          });
      }
  
      addRateRow() {
          const control = &lt;FormArray&gt;this.myForm.controls['rates'];
          control.push(this.blankRateRow());
      }
  
      removeRateRow(i: number) {
          const control = &lt;FormArray&gt;this.myForm.controls['rates'];
          control.removeAt(i);
      }
  
      save(model) {
          // call API to save
          // ...
          console.log(model);
      }
  
  }
  </code></pre>