使用角度材料上传文件 5 [英] Upload file using angular material 5

问题描述

我尝试使用 angular material 5 上传文件(angular 5).

I tried to upload file (angular 5) using angular material 5.

app.component.html

app.component.html

    <mat-horizontal-stepper [linear]="isLinear" #stepper="matHorizontalStepper">

  <mat-step [stepControl]="firstFormGroup">
    <form [formGroup]="firstFormGroup">
      <ng-template matStepLabel>Upload your audio file</ng-template>
      <mat-form-field>
          <input matInput  
          style="display: none" 
          type="file" (change)="onFileSelected($event)" 
          #fileInput name ="file" formControlName="firstCtrl" required>
      <button mat-button (click)="fileInput.click()" >Select File</button>
  </mat-form-field>
  <div>
    <button mat-button matStepperNext>Next</button>
  </div>
</form>

</表单>

app.component.ts

app.component.ts

export class AppComponent { selectedFile: File=null; isLinear = true; firstFormGroup: FormGroup; secondFormGroup: FormGroup; constructor(private _formBuilder: FormBuilder, private http: HttpClient) {} ngOnInit() { this.firstFormGroup = this._formBuilder.group({ firstCtrl: ['', Validators.required] }); this.secondFormGroup = this._formBuilder.group({ secondCtrl: ['', Validators.required] }); }

But I got this error

但是我遇到了这个错误

knowing this code worked well without angular material. Any issue?

知道此代码在没有角度材料的情况下运行良好.有什么问题吗?

解决方案

推荐答案

我遇到了同样的问题，

尝试这样做，

  openInput(){ 
        document.getElementById("fileInput").click();
   }

上面的代码所做的只是创建一个 Material 按钮并调用 openInput() 方法，该方法稍后将该按钮替换为下面的 HTML 代码

What above code does is creates simply a Material button and call openInput() method which later on replaces that button to below HTML code

这对我有用.

快乐编码☻

这篇关于使用角度材料上传文件 5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！