CODEWITHSUNDEEP
angularangular-material
olefrank
olefrank

Reputation: 6820

mat-form-field must contain a MatFormFieldControl and already imported

I get the error ERROR mat-form-field must contain a MatFormFieldControl which should mean that I need to import MatFormFieldModule in my nearest parent module. But I already did, so I don't understand what the problem is...

template

<form [formGroup]="form" (ngSubmit)="handleSubmit()">
    <mat-form-field>
        <input matInput placeholder="Name" formControlName="name" />
    </mat-form-field>

    <mat-form-field>
        <textarea
            matInput
            placeholder="Active Description"
            formControlName="activeDescription"
        ></textarea>
    </mat-form-field>

    <mat-form-field>
        <textarea
            matInput
            placeholder="Inactive Description"
            formControlName="inactiveDescription"
        ></textarea>
    </mat-form-field>

    <mat-form-field>
        <mat-checkbox formControlName="active">Active</mat-checkbox>
    </mat-form-field>
</form>

module

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule, MatCheckboxModule, MatFormFieldModule, MatInputModule, MatSelectModule } from '@angular/material';
import { EffectsModule } from '@ngrx/effects';
import { StoreModule } from '@ngrx/store';
import { PaymentConfigSelectorComponent } from './payment-config-selector/payment-config-selector.component';
import { PaymentMethodComponent } from './payment-method/payment-method.component';
import { PaymentMethodsComponent } from './payment-methods/payment-methods.component';
import { PaymentRoutingModule } from './payment-routing.module';
import { PaymentEffects } from './payment.effects';
import { paymentReducer } from './payment.reducer';
import { PaymentSmartComponent } from './smart/payment-smart.component';

@NgModule({
  declarations: [PaymentSmartComponent, PaymentMethodsComponent, PaymentConfigSelectorComponent, PaymentMethodComponent ],
  imports: [
    CommonModule,
    PaymentRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    EffectsModule.forFeature([PaymentEffects]),
    StoreModule.forFeature(
      'payment',
      paymentReducer,
    ),
    MatFormFieldModule, MatInputModule, MatSelectModule, MatCheckboxModule, MatButtonModule,
  ],
  providers: [
  ],
})
export class PaymentModule { }

Upvotes: 36

Views: 45259

Answers (6)

Awara Amini
Awara Amini

Reputation: 592

this is how it worked for me:

   <mat-form-field>
    <section class="example-section">
      <input matInput hidden="true" />
      <mat-checkbox
        class="example-margin"
        [(ngModel)]="newAppointment.isFirstVisit"
        >Is Your First Time</mat-checkbox
      >
    </section>
   </mat-form-field>

Upvotes: 1

Ragav Y
Ragav Y

Reputation: 1872

I had to do this to get it to work:-

<mat-form-field>
  <input hidden=true matInput> // this gets rid of the error, while the form still uses the input received in the
  mat-checkbox
  <mat-checkbox matInput formControlName="active">Active</mat-checkbox>
</mat-form-field>

Upvotes: 19

Miguel Monwoo
Miguel Monwoo

Reputation: 61

Using a 'div' with class 'mat-form-field' did the trick for me :

<div class="mat-form-field">
    <mat-checkbox formControlName="didAcceptTerms">
        <span
        [innerHTML]="'booking.submit.didAcceptTerms.lbl'|translate"></span>
    </mat-checkbox>
    <mat-error *ngIf="f.didAcceptTerms.errors">
        {{ 'booking.submit.didAcceptTerms.error' | translate }}
    </mat-error>    
</div>

Upvotes: 6

Sergej Morgulis
Sergej Morgulis

Reputation: 149

I fixed the issue by adding a hidden input field.

<mat-form-field>
 <mat-label>My Label</mat-label>
 <input matInput [hidden]="true" [(ngModel)]="myModel" name="myModel">
 <mat-checkbox class="ml-3" [(ngModel)]="myModel" name="myModel"></mat-checkbox>
</mat-form-field>

Upvotes: 13

SauerTrout
SauerTrout

Reputation: 499

For me, I was using a Material but needed to add import { MatInputModule } from '@angular/material/input';

to my module and then add MatInputModule to my imports array.

Make sure you have everything imported in your parent module that is necessary for use.

Upvotes: 2

Jscti
Jscti

Reputation: 14450

Actually the error doesn't mean a module import problem, but that you're using the mat-form-field without a valid control.

The problem is here :

<mat-form-field>
    <mat-checkbox formControlName="active">Active</mat-checkbox>
</mat-form-field>

MatChebox isn't intended to be contained in a mat-form-field but yeah its name is not very clear ... Keep just in mind that mat-form-field is the component that handles underline + hint + floating label + errors, etc ...

The list of supported child component is : input / textarea / select / chip-list (see https://material.angular.io/components/form-field/overview)

Upvotes: 82

Related Questions