Question

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

<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

中找到一个有效的示例

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

1 个答案: