Question

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

请确保您没有任何错误可以进入控制台。我也看到了这种行为-事实证明Angular只是一个奇怪的反应。您可以在this stackblitz code中看到空气。

该代码将发出Error: formGroup expects a FormGroup instance. Please pass one in.

如果您fix the code，错误将清除。

请参见this github post

Answer 2

从输入控件中删除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>

角材料零部件无法正确渲染

2 个答案: