title: Input Material Chips -- Init Form Array
body: <p>I want to init my mat chips input with input data but when I have two chips, it forms only one form : </p>
  
  <p><a href="https://i.stack.imgur.com/3s1lu.png" rel="noreferrer"><img src="https://i.stack.imgur.com/3s1lu.png" alt="enter image description here"></a></p>
  
  <p><strong>*.component.ts</strong></p>
  
  <pre><code>@Component({
    selector: 'app-pps-dialog',
    templateUrl: './pps-dialog.component.html',
  })
  
  export class PPSDialogComponent  implements OnInit {
  
  patientid: string;
  ppsForm: FormGroup;
  ppssToDisplay;
  
  
  visible: boolean = true;
  selectable: boolean = true;
  removable: boolean = true;
  addOnBlur: boolean = true;
  // Enter, comma
  separatorKeysCodes = [ENTER, COMMA];
  
  
  constructor(
  private route: ActivatedRoute, 
  private ppssService:PPSsService,
  private _changeDetectorRef: ChangeDetectorRef,
  private location: Location,
  private router: Router, 
  public dialog: MatDialog, 
  private formBuilder: FormBuilder,
  public dialogRef: MatDialogRef&lt;PPSDialogComponent&gt;,
  @Inject(MAT_DIALOG_DATA) public data: any) 
  
  { this.initForm(); }
  
  ngOnInit(): void {
      this.ppssToDisplay = this.ppssService.getSinglePPS(this.key)
        .subscribe(res =&gt; {
          this.ppssToDisplay = res;
          this.ppsForm.controls['requirements'].setValue(Array(this.ppssToDisplay.effetsind));
              console.log(this.ppssToDisplay.effetsind)); 
        });
  
  
    add(event: MatChipInputEvent): void {
          let input = event.input;
          let value = event.value;
          // Add our requirement
          if ((value || '').trim()) {
              this.requirements = this.ppsForm.get('requirements') as FormArray;
              this.requirements.push(this.formBuilder.control(value.trim()));
          }
          // Reset the input value
          if (input) {
              input.value = '';
          }
      }
  
      remove(index: number): void {
          const requirements = this.ppsForm.get('requirements') as FormArray;
  
          if (index &gt;= 0) {
              requirements.removeAt(index);
          }
      }
  
          initForm(): void {
              this.ppsForm = this.formBuilder.group({
                 requirements: this.formBuilder.array(['']),
                 // I don't know why, but I must init my form with empty chips if I want to receive data from service.
              });
          }
  
          get formData() {
            return &lt;FormArray&gt;this.ppsForm.get('requirements');
          }
  </code></pre>
  
  <p><strong>*ppss.service</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Patient } from '../models/patient.model';
  import { PPS } from '../models/pps.model';
  import { AngularFireDatabase, AngularFireList, AngularFireObject} from 'angularfire2/database';
  import { Observable } from 'rxjs/Observable';
  import {switchMap, map} from 'rxjs/operators';
  import * as firebase from 'firebase';
  import DataSnapshot = firebase.database.DataSnapshot;
  
  
  @Injectable({
    providedIn: 'root'
  })
  export class PPSsService {
  ppss: AngularFireList&lt;any&gt;;
  
  constructor(private database: AngularFireDatabase) {this.ppss = database.list('ppss');}
  getSinglePPS(key: string){
      return this.database.object('ppss/' + key).valueChanges();
     }
  
  }
  </code></pre>
  
  <blockquote>
    <p>console.log(<strong>this.ppssToDisplay.effetsind</strong>):</p>
  </blockquote>
  
  <pre><code> (2) ["Troubles de la vessie", "Troubles de l'érection"]
  </code></pre>
  
  <p>I've used the <a href="https://material.angular.io/components/chips/overview" rel="noreferrer">example of Angular Material</a>:</p>
  
  <p><strong>*.component.html</strong></p>
  
  <pre><code>&lt;mat-form-field style="width:50%" appearance="outline"&gt;
    &lt;mat-label&gt;Description du traitement&lt;/mat-label&gt;
    &lt;textarea matInput formControlName="description"&gt;&lt;/textarea&gt;
  &lt;/mat-form-field&gt;
  
  &lt;mat-form-field style="width:50%" appearance="outline"&gt;
    &lt;mat-label&gt;Effets indésirables du traitement&lt;/mat-label&gt;
    &lt;mat-chip-list #chipList&gt;
      &lt;mat-chip *ngFor="let requirement of formData.controls; let i = index;" [selectable]="selectable"
                [removable]="removable" (removed)="remove(i)"&gt;
        {{requirement.value}}
        &lt;mat-icon matChipRemove *ngIf="removable"&gt;cancel&lt;/mat-icon&gt;
      &lt;/mat-chip&gt;
      &lt;input placeholder="Nouvel effet indésirable..."
             [matChipInputFor]="chipList"
             [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
             [matChipInputAddOnBlur]="addOnBlur"
             (matChipInputTokenEnd)="add($event)"/&gt;
    &lt;/mat-chip-list&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <blockquote>
    <p>ERROR Error: Must supply a value for form control at index: 0:</p>
  </blockquote>
  
  <pre><code>&gt; core.js:1598 ERROR Error: Must supply a value for form control at index: 0.
          at forms.js:4304
          at forms.js:4274
          at Array.forEach (&lt;anonymous&gt;)
          at FormArray.push../node_modules/@angular/forms/fesm5/forms.js.FormArray._forEachChild (forms.js:4274)
          at FormArray.push../node_modules/@angular/forms/fesm5/forms.js.FormArray._checkAllValuesPresent (forms.js:4302)
          at FormArray.push../node_modules/@angular/forms/fesm5/forms.js.FormArray.setValu
  </code></pre>
  
  <p>I have the same problem if I init my form with :["Troubles de la vessie", "Troubles de l'érection",...]</p>