mat-list 的 formControlName 给出 'mat-form-field must contain a MatFormFieldControl'
formControlName for mat-list gives 'mat-form-field must contain a MatFormFieldControl'
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-selection-list
组件不实现 MatFormFieldControl
接口。这就是为什么它们不能在 mat-form-field
.
中使用的原因
这是上述示例的工作分支:https://stackblitz.com/edit/angular-xijtrv-yzpsmj
刚刚将 mat-list
替换为 mat-selection-list
并删除了包裹它的 mat-form-field
。
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-selection-list
组件不实现 MatFormFieldControl
接口。这就是为什么它们不能在 mat-form-field
.
这是上述示例的工作分支:https://stackblitz.com/edit/angular-xijtrv-yzpsmj
刚刚将 mat-list
替换为 mat-selection-list
并删除了包裹它的 mat-form-field
。