Угловые компоненты материала не отображаются правильно

Question

Компоненты My Angular Material не отображаются должным образом.Они должны выглядеть следующим образом:

Вместо этого они визуализируются так:

Это работало нормально, пока я не начал использовать Материал и Реактивные формы.Я перепробовал все.Я обычно нахожу, что если что-то подобное происходит, это проблема с модулем.Код для модуля:

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

Answer 1

Удаление matInput из управления вводом решило проблему.

Предыдущий код не отображается правильно:

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

Успешно отображается код:

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