formControlName для mat-list дает 'поле mat-form должно содержать MatFormFieldControl'

Question

StackBlitz (исполняемый пример)

Угловой HTML-шаблон для компонента

<form [formGroup]="myForm">
  <mat-form-field>
    <input matInput placeholder="name" formControlName="name">
  </mat-form-field>

  <mat-form-field>
    <mat-list formControlName="foldersList">
      <mat-list-item *ngFor="let folder of folders"><h4 mat-line>{{folder.name}}</h4></mat-list-item>
    </mat-list>
  </mat-form-field>
</form>

Угловой компонент TypeScript

export class MyComponent {
  folders = [ { name: 'Photos', updated: new Date('1/1/16') } ];

  myForm: FormGroup = this.fb.group({
    name: ['', Validators.required],
    foldersList: 
           new FormControl([]),
           // new FormArray([]),
           // ['', Validators. Validators.required],
           // this.fb.array([], [Validators.required]),
  });

  constructor(private fb: FormBuilder) {}
}

---

Ошибки

Error: No value accessor for form control with name: 'foldersList'
Error: mat-form-field must contain a MatFormFieldControl.

Answer 1

В mat-list а также mat-selection-list компоненты не реализуют MatFormFieldControlинтерфейс. Вот почему их нельзя использовать внутриmat-form-field.

Вот рабочая вилка приведенного выше примера: https://stackblitz.com/edit/angular-xijtrv-yzpsmj

Просто заменил mat-list с участием mat-selection-list и удалил mat-form-field это завернуло.