Angular Material 表单问题：角度 mat-form-field 必须包含 MatFormFieldControl

Posted 2023-02-22

【中文标题】Angular Material 表单问题：角度 mat-form-field 必须包含 MatFormFieldControl

【英文标题】：Angular Material form issue: angular mat-form-field must contain MatFormFieldControl

【发布时间】：2021-04-23 23:18:22

【问题描述】：

我创建了一个新的 Angular 表单，其中包括文本输入和现在的选择框。

问题是当我运行代码时，我得到了错误：

mat-form-field 必须包含一个 MatFormFieldControl

此错误仅在我尝试添加选择框后才显示，但我不确定我收到的错误是什么。

new.html:

<form [formGroup]='ResolutionFormGroup'>
    <mat-form-field>
        <mat-label>Title</mat-label>
        <input [formControl]='TitleControl' matInput placeholder="Title" required/>
    </mat-form-field>
    <mat-form-field>
        <mat-label>Description</mat-label>
        <input [formControl]='DescriptionControl' matInput placeholder="Description" required/>
    </mat-form-field>
    <mat-form-field>
        <select [formControl]='CategoryControl' matInput required>
            <option>This</option>
        </select>
    </mat-form-field>
</form>

如果您注释掉最后一个 <mat-form-field> 部分，那么代码将按预期运行，并且不会出现错误。

new.ts:

@Component(
  selector: 'app-new-resolution',
  templateUrl: './new-resolution.component.html',
  styleUrls: ['./new-resolution.component.scss']
)
export class NewResolutionComponent implements OnInit 
  uid: string
  category_id: string
  title: string
  description: string
  categoryList = []

  TitleControl: AbstractControl
  DescriptionControl: AbstractControl
  UserIdControl: AbstractControl
  CategoryControl: AbstractControl
  ResolutionFormGroup: FormGroup

  constructor(public as: AuthService,
    public rs: ResolutionsService,
    public dialog: MatDialogRef<NewResolutionComponent>)  

  ngOnInit(): void 
    this.ResInit()
    this.rs.GetCategories().subscribe(cat=>
      for(let c of cat)
        this.categoryList.push(value:c.payload.doc.id,category:c.payload.doc.data()['category'])
        // console.log(c.payload.doc.id)
        // console.log(c.payload.doc.data().category)
      
    )
    console.log(this.categoryList)
  
  private ResInit() 
    this.ResolutionFormGroup = new FormGroup()
    this.ResolutionFormGroup.registerControl('id',(this.UserIdControl = new FormControl('',[Validators.required])))
    this.ResolutionFormGroup.registerControl('category_id',(this.CategoryControl = new FormControl('',[Validators.required])))
    this.ResolutionFormGroup.registerControl('title',(this.TitleControl = new FormControl('',[Validators.required])))
    this.ResolutionFormGroup.registerControl('description',(this.DescriptionControl = new FormControl('',[Validators.required])))

  
  onNoClick(): void
    this.dialog.close()
  

编辑 new.module.ts（仅限导入）：

import  NgModule  from '@angular/core';
import  CommonModule  from '@angular/common';

import  ResolutionRoutingModule  from './resolution-routing.module';
import  ResolutionComponent  from './resolution/resolution.component';
import  ResolutionDetailComponent  from './resolution-detail/resolution-detail.component';
import  ResolutionListComponent  from './resolution-list/resolution-list.component';
import  NewResolutionComponent  from '../../forms/new-resolution/new-resolution.component';
import  MatFormFieldModule  from '@angular/material/form-field';
import  FormsModule, ReactiveFormsModule  from '@angular/forms';
import  MatDialogModule  from '@angular/material/dialog';
import  MatInputModule  from '@angular/material/input';
import  MatSelectModule  from '@angular/material/select';


@NgModule(
  declarations: [ResolutionComponent,ResolutionDetailComponent,ResolutionListComponent,NewResolutionComponent],
  imports: [
    CommonModule,
    ResolutionRoutingModule,
    MatFormFieldModule,
    ReactiveFormsModule,
    MatDialogModule,
    FormsModule,
    MatInputModule,
    MatSelectModule
  ]
)
export class New 

据我所知，我已正确导入所有内容，并且 formGroup 和 formControl 设置正确。

编辑 添加了完整的new.module.ts

【问题讨论】：

应该可以工作

【参考方案1】：

尝试使用mat-select 和mat-option 而不是select 和option：

<form [formGroup]='ResolutionFormGroup'>
    <mat-form-field>
        <mat-label>Title</mat-label>
        <input [formControl]='TitleControl' matInput placeholder="Title" required/>
    </mat-form-field>
    <mat-form-field>
        <mat-label>Description</mat-label>
        <input [formControl]='DescriptionControl' matInput placeholder="Description" required/>
    </mat-form-field>
    <mat-form-field>
        <mat-select [formControl]='CategoryControl'>
            <mat-option>This</mat-option>
        </mat-select>
    </mat-form-field>
</form>