title: Iterating through Angular Reactive Form
body: <p>I have an Angular reactive form which is dynamically created.</p>
  
  <p>I have a function which is called when the 'rate' or 'quantity' fields changes.  I'd like to iterate through the form and multiply the rate and quantity for each item and add them all together to get a grand total.  </p>
  
  <p>How do I do that? I've tried using .forEach, but that doesn't seem to work on FormArrays</p>
  
  <p>This the json structure of my form:</p>
  
  <pre><code>{
    "quoteDate": "2019-01-11T11:00:00",
    "quoteItems": [
      {
        "description": "",
        "quoteLineItems": [
          {
            "rate": 8,
            "quantity": 78,
          },
          {
            "rate": 2,
            "quantity": 32,
          }
        ]
      },
      {
        "description": "",
        "quoteLineItems": [
          {
            "rate": 24,
            "quantity": 5,
          }
        ]
      },
      {
        "description": "",
        "quoteLineItems": [
          {
            "rate": 1,
            "quantity": 2145,
          }
        ]
      }
    ]
  }  
  </code></pre>
  
  <p>And this is how I'm creating my form:</p>
  
  <pre><code>createForm() {
      this.quoteForm = this.fb.group({
        quoteDate: [this.quote.quoteDate, Validators.required],
        quoteItems: this.fb.array([])
      });
      this.addQuoteV2Item();
  }
  
  get quoteItems() {
    return this.quoteForm.get('quoteItems') as FormArray;
  }
  
  quoteLineItems(index) {
    return (this.quoteForm.get('quoteItems') as FormArray).at(index).get('quoteLineItems') as FormArray
  
  }
  
  addQuoteItem() {
    this.quoteItems.push(this.fb.group({
      description: '',
      quoteLineItems: this.fb.array([])
    }));
  }
  
  addQuoteLineItem(index, description) {
    this.quoteLineItems(index).push(
      this.fb.group({
        rate: '',
        quantity: '',
        total: 0
      })
  
    )
  }
  </code></pre>