title: angular 5 set value to nested form group form array
body: <p>my product object that contain a array is ready in client side like this:</p>
  
  <pre><code> public product =&gt;&gt;    require: [{ id: 397, product_id: 51, item: "asdasdd" },{ id: 398, product_id: 51, item: "bbbbbb" }]
  </code></pre>
  
  <p>for edit existing data porpose i want add item to my form input when form initialize.(i shoud make input for each item)</p>
  
  <p>how can append my item to that ... i wrote a for loop to add item to form that you can see below but it not work</p>
  
  <p>this is my form :</p>
  
  <pre><code>  public product;
    public requirementForm: FormGroup;
  
    constructor(private _store: StoreService, private fb: FormBuilder) {
      this.createForm();
  
    }
  
    createForm() {
      this.requirementForm = this.fb.group({
        itemRows: this.fb.array([])
      });
      this.requirementForm.setControl('itemRows', this.fb.array([]));
    }
  
    ngOnInit() {
  
      this.requirementForm.setControl('itemRows', this.fb.array([]));
      this.requirementForm = this.fb.group({
        itemRows: this.fb.array([this.initItemRows()])
      });
  
  
      this._store.ownersingleView(this.pid).subscribe((data: any) =&gt; {
        this.product = data;
  
        **for (let i = 0; i &lt; data.require.length; i++) {
          const control = &lt;FormArray&gt;this.requirementForm.controls['itemRows'];
          control.push(this.initItemRows());
          this.requirementForm.controls['itemRows'].controls['itemname'].setValue(this.product.require[i].item, {onlySelf: true});
        }**
  
      })
  
    }
  
    initItemRows() {
      return this.fb.group({
        itemname: ['']
      });
    }
  
    addNewRow() {
      const control = &lt;FormArray&gt;this.requirementForm.controls['itemRows'];
      control.push(this.initItemRows());
    }
  </code></pre>
  
  <p>html form:</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col s12 m12 l12"&gt;
      &lt;form [formGroup]="requirementForm"&gt;
        &lt;div formArrayName="itemRows"&gt;
          &lt;div class="item_x"&gt;
            &lt;div [@itemAnim]="true" class="item_in"
                 *ngFor="let itemrow of requirementForm.controls.itemRows.controls; let i=index"
                 [formGroupName]="i"&gt;
              &lt;div class="i-in"&gt;
                &lt;div class="requirement_item"&gt;
                  &lt;h6&gt;نیازمندی #{{ i + 1 }}&lt;/h6&gt;
                  &lt;div class="form-group"&gt;
                    &lt;label&gt;نام آیتم&lt;/label&gt;
                    &lt;input formControlName="itemname" class="form-control"&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="requirement_x"&gt;
                  &lt;div class="requirment_del"&gt;
                    &lt;div class="rdc"&gt;
                      &lt;button *ngIf="requirementForm.controls.itemRows.controls.length &gt; 1" (click)="deleteRow(i)"
                              mat-mini-fab=""&gt;&lt;i class="mdi mdi-delete"&gt;&lt;/i&gt;
                      &lt;/button&gt;
                    &lt;/div&gt;
  
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="action"&gt;
          &lt;div class="action_i"&gt;
            &lt;div class="ac_in"&gt;
              &lt;button mat-mini-fab color="primary" (click)="addNewRow()"&gt;&lt;i class="mdi mdi-plus"&gt;&lt;/i&gt;&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>