mat-form-field must contain a MatFormFieldControl in type file Input field

Question

I am trying to add File type input in angular material form but I am getting error as mat-form-field must contain a MatFormFieldControl.

I tried adding matInput in the input tag then too I am getting error as mat-form-field must contain a MatFormFieldControl what are ways to add file upload type input inside the angular material form?

<mat-sidenav-container>
  <mat-sidenav-content>
    <form>
      <mat-form-field appearance="outline">
          <mat-label>Media Title</mat-label>
        <input matInput placeholder="Enter your name">
      </mat-form-field>
     <mat-form-field>
        <button type="button" mat-raised-button (click)="fileInput.click()">Choose File</button>
        <input hidden (change)="onFileSelected()" #fileInput type="file" id="file"> 
      </mat-form-field> 


    </form>
  </mat-sidenav-content>

</mat-sidenav-container>

app.module.ts

import { AngularMaterialModule } from './material.module';
import { MatInputModule, MatFormFieldModule } from '@angular/material';
imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AngularMaterialModule,
    MatInputModule,
    MatFormFieldModule

  ],

File Upload input should be added inside the form.

Output:

creativenitish creativenitish · Accepted Answer · 2019-08-27T10:46:22

Angular Material supports only a handful of input types and file type is not one of them. You can check more at:

https://material.angular.io/components/input/overview#supported-code-lt-input-gt-code-types

You need to add file type outside of <mat-form-field>

mat-form-field must contain a MatFormFieldControl in type file Input field

1 Answers