Angular 6 输入文件阻止文件对话框打开

Question

我有一个简单的文件类型输入，我需要在打开文件对话框选择文件之前检查布尔变量。有没有办法做到这一点？这是我的代码：

<input type="file" id="uploadFile" [disabled]="disableUpload" (change)="onUpload($event)" />

单击输入，将显示一个文件对话框。我需要进行检查，如果是肯定的，则阻止文件对话框打开。谢谢大家！

Answer 1

您可以尝试添加attr.disabled而不是disabled

<input [attr.disabled]="disableUpload ? '' : null"/>

或者，如果您使用反应式表单（我建议您这样做），您可以使用表单控件禁用它。

更新

您可以为文件输入上的事件分配一个方法click，然后检查布尔值以执行所需的操作。

在组件中：

fileDialogShouldOpen = false;

fileInputClick = (event) => {

    // Open file dialog
    if(this.fileDialogShouldOpen){
      return true;
    }
    // Do not open file dialog
    else{

      event.preventDefault();
      event.stopPropagation();
      return false;
    }
}

并在模板中：

<input type="file" (click)="fileInputClick($event)">

您可以在此stackblitz 项目中找到一个工作示例