CODEWITHSUNDEEP
angularangular-material
Mark
Mark

Reputation: 357

Angular Material Components not rendering correctly

My Angular Material components are not rendering properly. They should look like this:

enter image description here

Instead they render like this:

enter image description here

It was working fine until I started using Material and Reactive Forms. I've tried everything. I usually find that if something like this happens the it is a problem with the Module. Code for the Module:

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { RegisterRoutingModule } from './register-routing.module';
import { RegisterComponent } from "./register.component";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { MatButtonModule, MatInputModule, MatFormFieldModule } from "@angular/material";
import { HttpClientModule } from "@angular/common/http";

@NgModule({
  imports: [
    CommonModule,
    RegisterRoutingModule,
    FormsModule,
    MatButtonModule,
    MatInputModule,
    HttpClientModule,
    ReactiveFormsModule,
    MatFormFieldModule
      ],
      declarations: [RegisterComponent]
    })
export class RegisterModule { }

Upvotes: 1

Views: 2364

Answers (2)

Grant Curell
Grant Curell

Reputation: 1753

Make sure you don't have any errors going out to console. I also saw this behavior - turns out Angular just has a strange response. You can see the air in this stackblitz code.

That code will issue Error: formGroup expects a FormGroup instance. Please pass one in.

If you fix the code the error will clear.

See this github post

Upvotes: 1

Mark
Mark

Reputation: 357

Removing matInput from the input control solved the problem.

Previous code not rendering properly:

  <form [formGroup]="registerForm" (ngSubmit)="register(registerForm)">
    <mat-form-field appearance="outline">
      <input matInput type="text" id="firstName" class="form-control" placeholder="First Name" formControlName="firstName" autofocus>
    </mat-form-field>
  </form>

Successfully rendering code:

  <form [formGroup]="registerForm" (ngSubmit)="register(registerForm)">
    <mat-form-field appearance="outline">
      <input type="text" id="firstName" class="form-control" placeholder="First Name" formControlName="firstName" autofocus>
    </mat-form-field>
  </form>

Upvotes: 1

Related Questions