使用角度材料上传文件 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屋!