title: Angular material form field isn't working
body: <p>I am following this <a href="https://material.angular.io/components/form-field/overview" rel="nofollow noreferrer">https://material.angular.io/components/form-field/overview</a>
  but in my code form fields behaviour isn't changing also label isn't appearing
  for example if the appearance is fill it look like as default form</p>
  <pre><code> &lt;mat-form-field  appearance=&quot;fill&quot;&gt;
         &lt;mat-label&gt;First Name&lt;/mat-label&gt;
         &lt;input placeholder=&quot;FirstName&lt;&quot; formControlName=&quot;FName&quot;&gt;
   &lt;/mat-form-field&gt;
  </code></pre>
  <p>Screen
  [1]: <a href="https://i.stack.imgur.com/6ihkn.png" rel="nofollow noreferrer">https://i.stack.imgur.com/6ihkn.png</a>
  but even I change the appearance=&quot;standard&quot; or appearance=&quot;outline&quot; it doesn't change the behaviour
  App-module.ts</p>
  <pre><code>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 { }
  </code></pre>
  <p>can someone tell what needs to be done</p>