title: Form field style doesn't work in Angular 9?
body: <p>This is my app.component.html:</p>
  
  <pre><code>&lt;form fxLayout="column" fxLayoutAlign="center center" [formGroup]="loginForm" (ngSubmit)="loginUser(loginForm.value)"&gt;
    &lt;mat-form-field appearance="fill"&gt;
      &lt;mat-label &gt;Username: &lt;/mat-label&gt;
      &lt;input matInput formControlName="uname" /&gt;
    &lt;/mat-form-field&gt;
    &lt;br&gt;
    &lt;mat-form-field appearance="fill"&gt;
      &lt;mat-label&gt;Password: &lt;/mat-label&gt;
      &lt;input type="password" matInput formControlName="password" /&gt;
    &lt;/mat-form-field&gt;
    &lt;button type="submit" mat-button color="primary"&gt;Login&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>app.module.ts</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  
  import { MatButtonModule   } from '@angular/material/button';
  import { MatFormFieldModule } from '@angular/material/form-field';
  import { MatInputModule } from '@angular/material/input';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { FlexLayoutModule } from '@angular/flex-layout';
  
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      MatButtonModule,
      MatFormFieldModule,
      MatInputModule,
      FormsModule,
      ReactiveFormsModule,
      BrowserAnimationsModule,
      FlexLayoutModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>And form field style will be like this: <a href="https://i.stack.imgur.com/peUTp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/peUTp.png" alt="enter image description here"></a></p>
  
  <p>and If I write something in then I write it on on the tag:
  <a href="https://i.stack.imgur.com/vb09w.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vb09w.png" alt="enter image description here"></a></p>
  
  <p>What causes this?
  How I would be able to reach for him to be like this than here Simple Form Field:
  <a href="https://material.angular.io/components/form-field/overview" rel="nofollow noreferrer">https://material.angular.io/components/form-field/overview</a></p>