title: FormArray - How to pass a string array to it?
body: <p>This is my FormGroup:</p>
  
  <pre><code>this.productGroup = this.fb.group({
    name: ['', Validators.compose([Validators.required, Validators.maxLength(80)])],
    variants: this.fb.array([
      this.fb.group({
        type: '',
        options: this.fb.array([])
      })
    ])
  });
  </code></pre>
  
  <p>How to pass a string array to <code>options</code>? Like this <code>[ 'string1', 'string2' ]</code>. I'm dinamically getting those values here: <a href="https://stackoverflow.com/questions/53109833/angular-material-matchiplist-how-to-use-it-on-a-dynamic-formarray/53110689#comment93143214_53110689">stackblitz</a>, however i'm not sure how to fill the array. I would like to pass a generic string array directly to <code>options</code>.</p>
  
  <p><code>variants</code> array example: </p>
  
  <pre><code>variants: [ 
     { type: 'Color', options: ['Red', 'Blue'] },
     { type: 'Size', options: ['Small', 'Medium', 'Big'] }
  ]
  </code></pre>
  
  <p>Html:</p>
  
  <pre><code>&lt;form [formGroup]="productGroup"&gt;
    &lt;input formControlName="name"&gt;
    &lt;div formArrayName="variants" *ngFor="let item of productGroup.controls['variants'].controls; let i = index;"&gt;
      &lt;div [formGroupName]="i"&gt;
        &lt;mat-form-field&gt;
          &lt;input type="text" placeholder="Variable Type" aria-label="Number" matInput formControlName="type" [matAutocomplete]="auto"&gt;
          &lt;mat-autocomplete #auto="matAutocomplete"&gt;
            &lt;mat-option *ngFor="let type of types" [value]="type"&gt;
              {{type}}
            &lt;/mat-option&gt;
          &lt;/mat-autocomplete&gt;
        &lt;/mat-form-field&gt;
        &lt;mat-form-field&gt;
          &lt;mat-chip-list #chipList&gt;
            &lt;mat-chip *ngFor="let opt of typesOptionsArray[i]" [selectable]="true"
                      [removable]="true" (removed)="removeOpt(opt, i)"&gt;
              {{opt}}
              &lt;mat-icon matChipRemove&gt;cancel&lt;/mat-icon&gt;
            &lt;/mat-chip&gt;
            &lt;input placeholder="Type Options"
                    [matChipInputFor]="chipList"
                    [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                    [matChipInputAddOnBlur]="true"
                    (matChipInputTokenEnd)="addOpt($event, i)"&gt;
          &lt;/mat-chip-list&gt;
        &lt;/mat-form-field&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;a href="javascript:" (click)="addItem()"&gt; Add Variant &lt;/a&gt;
        &lt;a href="javascript:" (click)="removeItem(i)" *ngIf="i &gt; 0"&gt; Remove Variant &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>