Angular 9 - mat-form-field must contain a Matformfieldcontrol

Asked

Viewed 1,567 times

1

I found some posts on the internet talking about this subject, but I found no solution to my case.

I have a form and when I start the APP I get the message -> mat-form-field must contain a Matformfieldcontrol.

The solutions pointed to the insertion of matInput in the input, even with matInput the failure continues to occur.

inserir a descrição da imagem aqui

app.modulets.

...
import { ReactiveFormsModule } from '@angular/forms';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
...
@NgModule({
  declarations: [
    AppComponent
  ],
  entryComponents: [

  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot({
      rippleEffect: true,
      backButtonIcon: 'chevron-back-outline'
    }),
    AppRoutingModule,
    HttpClientModule,
    IonicStorageModule.forRoot(),
    ComponentsModule,
    ReactiveFormsModule,
    MatInputModule,
    MatFormFieldModule,
  ],
  exports: [
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

channe-page.ts

import { Component, Input, Injectable, OnInit, LOCALE_ID, Inject } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-channel',
  templateUrl: './channel.page.html',
})

export class ChannelPage implements OnInit {

  ChannelCreateForm = this._FormBuilder.group({
    ChannelTitle: [''],
    ChannelDescription: [''],
    ChannelVisibility: [''],
    ChannelEmailPrivateChannel: [''],
  });

  constructor(
    public _FormBuilder: FormBuilder,
  ) { }
....
}

My form

<form [formGroup]="ChannelCreateForm" (ngSubmit)="CreateChannel()">

    <mat-form-field class="input-full-width" appearance="standard">
      <mat-label>{{'channel.NewChannelPage.name' | transloco}}</mat-label>
      <input matInput #channeltitle type="text" formControlName="ChannelTitle" maxlength="50" />
      <mat-hint align="end">{{channeltitle.value.length}} / 50</mat-hint>
    </mat-form-field>  

<mat-form-field class="input-full-width" appearance="standard">
      <mat-label>{{'channel.NewChannelPage.description' | transloco}}</mat-label>
      <textarea matInput #channeldescription type="text" formControlName="ChannelDescription" rows="3" maxlength="255"></textarea>
      <mat-hint align="end">{{channeldescription.value.length}} / 255</mat-hint>
    </mat-form-field>
....
</form>
angular ionic angular-material

  • See if the error adds up MatFormFieldModule to your module Imports list.

  • It includes the Matformfieldmodule inside the app.module.ts and the failure continues. Matformfieldmodule also inside the component.

  • An error of mine, in the form I have a mat-radio-button, and as it is the first made that I create form with material design, I took example of the internet and this was inside a mat-form-field. I removed the mat-form-field and it worked.

2 answers

1

part of the form I have a mat-radio-button, was wrapped with a mat-form-field, after removing the form ran.

<mat-radio-group class="radio-group" aria-labelledby="RadioChannelVisibility" formControlName="ChannelVisibility">
  <mat-radio-button class="radio-button" value="public">
    <mat-icon aria-hidden="false" aria-label="lock_open">lock_open</mat-icon>
    {{'channel.NewChannelPage.public' | transloco}}
  </mat-radio-button>

  <mat-radio-button class="radio-button" value="private">
    <mat-icon aria-hidden="false" aria-label="lock">lock</mat-icon>
    {{'channel.NewChannelPage.private' | transloco}}
  </mat-radio-button>
</mat-radio-group>

0

You need to import the module: MatFormFieldModule, in accordance with documentation quote.

import {MatFormFieldModule} from '@angular/material/form-field';

Check if your component is declared in the same module that you imported the material module, at declarations.

  • I added Matformfieldmodule inside the app.module.ts, but the failure persists.

Browser other questions tagged angular ionic angular-material

You are not signed in. Login or sign up in order to post.