输入材料芯片-InitFormArray

我想用输入数据初始化我的mat芯片输入但是当我有两个芯片时,它只形成一个形式:

*.component.ts

@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,
@Inject(MAT_DIALOG_DATA) public data: any) 

{ this.initForm(); }

ngOnInit(): void {
    this.ppssToDisplay = this.ppssService.getSinglePPS(this.key)
      .subscribe(res => {
        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 >= 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 this.ppsForm.get('requirements');
        }

*ppss.service

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;

constructor(private database: AngularFireDatabase) {this.ppss = database.list('ppss');}
getSinglePPS(key: string){
    return this.database.object('ppss/' + key).valueChanges();
   }

}

console.log(this.ppssToDisplay.effetsind):

 (2) ["Troubles de la vessie", "Troubles de l'érection"]

我使用了Angular Material的例子:

*.component.html

  Description du traitement
  



  Effets indésirables du traitement
  
    
      {{requirement.value}}
      cancel
    
    
  

错误错误:必须在索引处为表单控件提供值:0:

> 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 ()
        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

如果我用以下内容填写表格,我也有同样的问题:["Troubles de la vessie","Troubles del'érection",...]

使用Reactive FormArray非常棘手.检查这个最小有效的例子:

import {Component, OnInit} from '@angular/core';
import {COMMA, ENTER} from '@angular/cdk/keycodes';
import {FormArray, FormBuilder, FormGroup} from '@angular/forms';
import {MatChipInputEvent} from '@angular/material';

@Component({
  selector: 'app',
  template: `
    
      Effets indésirables du traitement
      
        
          {{requirement}}
          cancel
        
        
      
    
  `
})
export class AppComponent implements OnInit {

  formData: FormGroup;
  selectable = true;
  removable = true;
  addOnBlur= true;
  readonly separatorKeysCodes: number[] = [ENTER, COMMA];

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.initForm();
    this.ppssToDisplay();
  }

  initForm(): void {
    this.formData = this.formBuilder.group({
      requirements: this.formBuilder.array([]),
    })
  }

  ppssToDisplay() {
    // Simulate your async call to ppssService
    setTimeout(() => {
      const cOntrol= this.formData.controls.requirements;
      ['Troubles de la vessie', 'Troubles de l\'érection'].map(x =>
        control.push(this.formBuilder.control(x))
      );
    }, 300)
  }

  add(e: MatChipInputEvent) {
    const input = e.input;
    const value = e.value;

    if ((value || '').trim()) {
      const cOntrol= this.formData.controls.requirements;
      control.push(this.formBuilder.control(value.trim()));
    }

    if (input) {
      input.value = '';
    }
  }

  remove(i: number) {
    let cOntrol= this.formData.controls.requirements;
    control.removeAt(i);
  }
}