CODEWITHSUNDEEP
htmlangulartypescript
Luidi
Luidi

Reputation: 43

Angular 10: ERROR Error: mat-form-field must contain a MatFormFieldControl

I'm trying to implement a form group on a page, but this error is happening:

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)

My app.module.ts is importing MatFormFieldModule:

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

and here is my html and ts code from component:

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")
});

I don't know why this error is happening, I have the same form field in a another Angular 9 project and it's working. I'm already wasting hours on this, I've tried to implement the FormGroup in other ways, such as using FormBuilder, but without success.

Upvotes: 1

Views: 1922

Answers (1)

Piyush Jain
Piyush Jain

Reputation: 1986

you can do like this.

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 {}

You can check working demo there

Let me know if you still face any issue.

Upvotes: 1

Related Questions