Angular 10：ERROR 错误：mat-form-field 必须包含 MatFormFieldControl

Question

我正在尝试在页面上实现表单组，但是发生了这个错误：

ERROR Error: No value accessor for form control with name: 'modalidade'
at _throwError (forms.js:2431)
at setUpControl (forms.js:2339)
at FormGroupDirective.addControl (forms.js:5475)
at FormControlName._setUpControl (forms.js:6057)
at FormControlName.ngOnChanges (forms.js:5988)
at FormControlName.rememberChangeHistoryAndInvokeOnChangesHook (core.js:2131)
at callHook (core.js:3042)
at callHooks (core.js:3008)
at executeInitAndCheckHooks (core.js:2960)
at selectIndexInternal (core.js:6180)

ERROR Error: No value accessor for form control with name: 'unidade'
at _throwError (forms.js:2431)
at setUpControl (forms.js:2339)
at FormGroupDirective.addControl (forms.js:5475)
at FormControlName._setUpControl (forms.js:6057)
at FormControlName.ngOnChanges (forms.js:5988)
at FormControlName.rememberChangeHistoryAndInvokeOnChangesHook (core.js:2131)
at callHook (core.js:3042)
at callHooks (core.js:3008)
at executeInitAndCheckHooks (core.js:2960)
at selectIndexInternal (core.js:6180)

ERROR Error: No value accessor for form control with name: 'curso'
at _throwError (forms.js:2431)
at setUpControl (forms.js:2339)
at FormGroupDirective.addControl (forms.js:5475)
at FormControlName._setUpControl (forms.js:6057)
at FormControlName.ngOnChanges (forms.js:5988)
at FormControlName.rememberChangeHistoryAndInvokeOnChangesHook (core.js:2131)
at callHook (core.js:3042)
at callHooks (core.js:3008)
at executeInitAndCheckHooks (core.js:2960)
at selectIndexInternal (core.js:6180)

ERROR Error: mat-form-field must contain a MatFormFieldControl.
at getMatFormFieldMissingControlError (form-field.js:227)
at MatFormField._validateControlChild (form-field.js:707)
at MatFormField.ngAfterContentInit (form-field.js:514)
at callHook (core.js:3038)
at callHooks (core.js:3008)
at executeInitAndCheckHooks (core.js:2960)
at refreshView (core.js:7213)
at refreshEmbeddedViews (core.js:8280)
at refreshView (core.js:7196)
at refreshComponent (core.js:8326)

我的 app.module.ts 正在导入 MatFormFieldModule：

imports: [
CommonModule,
BrowserModule,
AppRoutingModule,
FormsModule,
BrowserAnimationsModule,
MatIconModule,
MatRadioModule,
MatTableModule,
MatInputModule,
MatFormFieldModule,
MatPaginatorModule,
MatTabsModule,
MatProgressSpinnerModule,
ReactiveFormsModule,
MatSlideToggleModule,
StoreModule.forRoot(reducers),
EffectsModule.forRoot([AuthEffects]),
MatSortModule
]

这是我来自组件的 html 和 ts 代码：

HTML

<form [formGroup]="filtroForm">
            <mat-form-field appearance="none">
                <mat-select formControlName="modalidade">
                  <mat-select-trigger>
                    Modalidade
                  </mat-select-trigger>
                  <mat-option value=""></mat-option>
                  <mat-option *ngFor="let modalidade of filtroOptions.modalidade" [value]="modalidade">{{modalidade}}</mat-option>
                </mat-select>
            </mat-form-field>

            <mat-form-field appearance="none">
                <mat-select formControlName="unidade">
                  <mat-select-trigger>
                    Unidade
                  </mat-select-trigger>
                  <mat-option value=""></mat-option>
                  <mat-option *ngFor="let unidade of filtroOptions.unidade" [value]="unidade">{{unidade}}</mat-option>
                </mat-select>
            </mat-form-field>

            <mat-form-field appearance="none">
                <mat-select formControlName="curso">
                  <mat-select-trigger>
                    Curso
                  </mat-select-trigger>
                  <mat-option value=""></mat-option>
                  <mat-option *ngFor="let curso of filtroOptions.curso" [value]="curso">{{matriz}}</mat-option>
                </mat-select>
            </mat-form-field>
        </form>

TS

filtro = {
 modalidade: "Todas",
 unidade: "Todas",
 curso: "Todas"
};

filtroOptions = {
  modalidade: [],
  unidade: [],
  curso: []
}

filtroForm = new FormGroup({
  modalidade: new FormControl("Todas"),
  unidade: new FormControl("Todas"),
  curso: new FormControl("Todas")
});

我不知道为什么会发生这个错误，我在另一个 Angular 9 项目中有相同的表单字段并且它正在工作。我已经在这上面浪费了几个小时，我尝试过以其他方式实现 FormGroup，例如使用 FormBuilder，但没有成功。

Answer 1

你可以这样做。

app.component.html

<form [formGroup]="filtroForm">
    <mat-form-field>
        <mat-label>Choose an option</mat-label>
        <mat-select formControlName="modalidade">
            <mat-select-trigger>
                Modalidade
            </mat-select-trigger>
            <mat-option *ngFor="let modalidade of filtroOptions.modalidade" [value]="modalidade">{{modalidade}}
            </mat-option>
        </mat-select>
    </mat-form-field>

    <mat-form-field>
        <mat-label>Choose an option</mat-label>
        <mat-select formControlName="unidade">
            <mat-select-trigger>
                Unidade
            </mat-select-trigger>
            <mat-option *ngFor="let unidade of filtroOptions.unidade" [value]="unidade">{{unidade}}</mat-option>
        </mat-select>
    </mat-form-field>

    <mat-form-field>
        <mat-label>Choose an option</mat-label>
        <mat-select formControlName="curso">
            <mat-select-trigger>
                Curso
            </mat-select-trigger>
            <mat-option *ngFor="let curso of filtroOptions.curso" [value]="curso">{{curso}}</mat-option>
        </mat-select>
    </mat-form-field>
</form>

app.component.ts

import { Component } from "@angular/core";
import { FormGroup, FormControl } from "@angular/forms";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  filtroOptions = {
    modalidade: ["value1", "value2"],
    unidade: ["value3", "value4"],
    curso: ["value5", "value6"]
  };

  filtroForm = new FormGroup({
    modalidade: new FormControl("Todas"),
    unidade: new FormControl("Todas"),
    curso: new FormControl("Todas")
  });
}

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";

import { MatFormFieldModule } from "@angular/material/form-field";
import { MatSelectModule } from "@angular/material/select";

import { AppComponent } from "./app.component";
import { HelloComponent } from "./hello.component";

@NgModule({
  imports: [
    BrowserAnimationsModule,
    // BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    MatFormFieldModule,
    MatSelectModule
  ],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

你可以在那里查看working demo

如果您仍然遇到任何问题，请告诉我。