mat-form-field的类型文件输入字段中必须包含MatFormFieldControl

时间:2019-08-27 10:20:52

标签: angular-material

我正在尝试以有角度的材料形式添加文件类型输入,但是由于mat-form-field必须包含MatFormFieldControl,因此出现错误。

我尝试在输入标签中添加matInput,但我也收到了错误消息,因为mat-form-field必须包含MatFormFieldControl,有什么方法可以在角形材质表单中添加文件上传类型输入?

<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

  ],

文件上载输入应添加到表单中。

输出:enter image description here

1 个答案:

答案 0 :(得分:0)

Angular Material仅支持少数几种输入类型,而file类型不是其中一种。您可以在以下位置查看更多信息:

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

您需要在file之外添加<mat-form-field>类型