mat-list 的 formControlName 给出 'mat-form-field 必须包含 MatFormFieldControl'

Posted 2023-03-13

【中文标题】mat-list 的 formControlName 给出 \'mat-form-field 必须包含 MatFormFieldControl\'

【英文标题】：formControlName for mat-list gives 'mat-form-field must contain a MatFormFieldControl'mat-list 的 formControlName 给出 'mat-form-field 必须包含 MatFormFieldControl'

【发布时间】：2020-03-24 17:47:11

【问题描述】：

StackBlitz (runnable example)

组件的 Angular 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>

Angular 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.

【问题讨论】：

通常你不会将mat-list 放在mat-form-field 中。也许如果您希望用户从列表中选择某些内容，请改用 mat-select 或 mat-selection-list。

是的，在我的实际代码中，我有mat-selection-list，里面有mat-list-option。无论如何，你知道我在这里做错了什么吗？

【参考方案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。

【讨论】：

不明白。您不能使用mat-list 和mat-selection-list。现在您使用mat-selection-list 解决了它。能再解释一下吗？