Angular材料形式字段无效

Question

我正在关注此 https：//material.angular.io/compar.io/components/form-firfield/概述 但是在我的代码表格字段中行为没有更改，也没有出现标签 例如，如果外观填充，看起来像默认表单

 <mat-form-field  appearance="fill">
       <mat-label>First Name</mat-label>
       <input placeholder="FirstName<" formControlName="FName">
 </mat-form-field>

屏幕 [1]： https://i.sstatic.net/6ihkn.png 但是，即使我更改外观=“标准”或外观=“轮廓”它不会改变行为 app-module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MessageFormComponent } from './message-form/message-form.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatFormFieldModule, MAT_FORM_FIELD_DEFAULT_OPTIONS} from '@angular/material/form-field';
import {MatButtonModule} from '@angular/material/button';
import {FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from  '@angular/common/http';
import {MatInputModule} from '@angular/material/input'

@NgModule({
  declarations: [
    AppComponent,
    MessageFormComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MatFormFieldModule,
    MatButtonModule,
    MatInputModule,
    HttpClientModule

  ],
  providers: [{provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'fill'}}],
  bootstrap: [AppComponent]
})
export class AppModule { }

有人可以告诉需要做什么

Answer 1

你们都很好。只是缺少matinput您的＆lt; Input＆gt;上的指令

 <mat-form-field  appearance="fill">
       <mat-label>First Name</mat-label>
       <input placeholder="FirstName" matInput> formControlName="FName">
 </mat-form-field>