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

Question

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

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

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

Answer 1

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

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

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

更新

您可以在文件输入时将方法分配给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 project 中找到一个工作示例