Angular - 无法使用集合和 *ngFor 填充 mat-chip-list - 更新：设置 mat-select multiple 的值有问题吗？

Question

I am having a problem populating a mat-chip-list . In my angular component which is contained within a modal window I pass data using MAT_DIALOG_DATA . This looks like so:

{
  name: 'string',
  email: 'string',
  tags: {
    company: [{displayName: 'string', id: ''}, ...] // can contain many or no items
  }
} 

I pass this through to the component and assign the companies property to a FormControl when I create the FormGroup for the component (see code below). I then use a method to return the FormControl value so I can loop through the content to produce a mat-chip-list , here is my template code:

<mat-select formControlName="companies" multiple class="edit-user__form__chip-select">
  <mat-select-trigger>
    <mat-chip-list>
      <mat-chip *ngFor="let company of outputChips('companies')"
                [removable]="true"
                (removed)="onChipRemove('companies', company)">
        {{ company.displayName }}
        <mat-icon matChipRemove>cancel</mat-icon>
      </mat-chip>
    </mat-chip-list>
  </mat-select-trigger>
  <mat-option *ngFor="let company of companyList" [value]="company">{{company.displayName}}</mat-option>
</mat-select>

here is my code file (i have only included the relevant parts):

constructor(public dialogRef: MatDialogRef<EditAccountComponent>,
              @Inject(MAT_DIALOG_DATA) private data,
              private apiService: ApiService,
              private emailUniqueValidator: EmailUniqueValidator) {
    this.user = data;
  }

ngOnInit(): void {
    this.editAccountForm = this.createEditUserForm();
    // this returns a collection [{}, {}] where the objects have the same structure / signature
    // as the items contained with in the this.user.tags.company collection
    this.loadCompanies(); 
  }

createEditUserForm(): FormGroup {
    return new FormGroup({
      name: new FormControl(this.user.name, [Validators.required, Validators.max(50)]),
      email: new FormControl(
        this.user.emailAddress,
        [Validators.required, Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$')],
        this.emailUniqueValidator.validate.bind(this)
      ),
      companies: new FormControl(this.user.tags.company),
      roles: new FormArray([])
    });
  }

outputChips(control): any {
    return this.editAccountForm.controls[control].value;
  }

loadCompanies(): void {
    this.apiService.getTags('company', '').subscribe(tags => this.companyList = tags.slice(0, 20));
  }

Now my problem is that the mat-chip-list isn't being populated, however if I use the same code ( *ngFor ) with a <div> it will output the correct data. I am sure it maybe because I am using a FormControl to define the companies property/control of the FormGroup . So I changed this to a FormArray and formatted the this.user.tags.company to a FormArray like so...

createEditUserForm(): FormGroup {
    let formComps: FormArray;

    if (this.user.tags && this.user.tags.company) {
      formComps = new FormArray([...this.user.tags.company.map(item => new FormControl(item))]);
    }

    return new FormGroup({
      name: new FormControl(this.user.name, [Validators.required, Validators.max(50)]),
      email: new FormControl(
        this.user.emailAddress,
        [Validators.required, Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$')],
        this.emailUniqueValidator.validate.bind(this)
      ),
      companies: new FormArray(formComps),
      roles: new FormArray([])
    });
  }

However this produces an error "EditAccountComponent.html:38 ERROR TypeError: Cannot read property 'controls' of undefined" so when I use FormArray I can't bind to the template. I really am having trouble trying to determine what I should do to make this work. I am currently looking through Stackoverflow for answers but if anyone can explain where I am going wrong and what I should do to fix my problem I would be most appreciative. If I have worded this question badly please comment and I shall rewrite and clarify.

** Update **

I'm starting to think that the problem isn't the mat-chip-list but the fact that the companies: new FormControl(this.user.tags.company) may not be correctly initialised, for example could this be a problem with setting the value or a mat-select with multiple values using a formControlName and not ngModal ?

Answer 1

If you want to iterate over form array within your HTML you first need to specify formArrayName and then iterate over all of the controls. In your case, it should look more or less like that.

<mat-select formArrayName="companies" multiple class="edit-user__form__chip-select">
  <mat-select-trigger>
    <mat-chip-list>
      <mat-chip *ngFor="let company of companies.controls"
                [removable]="true"
                (removed)="onChipRemove('companies', company)">
        {{ company.displayName }}
        <mat-icon matChipRemove>cancel</mat-icon>
      </mat-chip>
    </mat-chip-list>
  </mat-select-trigger>
  <mat-option *ngFor="let company of companyList" [value]="company">{{company.displayName}}</mat-option>
</mat-select>

But I am not sure if your error doesn't point some other problem.