javascript - 需要 Angular 输入文件

Question

我有一个 div，它根据列表包含一个或多个输入文件。这是用 ngFor 生成的。我使用两个按钮删除或添加列表元素，当然它会更新 HTML。

这是 html:

 <form name="form" (ngSubmit)="f.form.valid" #f="ngForm" novalidate>
    <div *ngFor="let dataset of datasetList; let index = index">

      <div id="datasetFiles">
        <h6>Browse the files:</h6>
        <div class="container">
          <div class="row justify-content-between">
            <div class="col-6 d-flex align-items-center">
              <input id="file" #file (change)="onChange(file.files, index, $event.currentTarget)" type="file">
            </div>
            <div class="col-2 d-flex align-items-center">
              <button mat-icon-button color="warn (click)="removeDataset(index)">
                <mat-icon>delete</mat-icon>
              </button>
            </div>
          </div>
        </div>
        <div *ngIf="typeDataset.invalid && (typeDataset.dirty || typeDataset.touched)" class="alert alert-danger">
          Dataset type is required
        </div>
        <div *ngIf="!fileValid" class="alert alert-danger">
          Dataset file required
        </div>
      </div>
    </div>
    <div>
      <button mat-icon-button color="primary" (click)="addDataset()">
        <mat-icon>add_box</mat-icon>
      </button>
    </div>

    <button mat-button color="primary" type="submit" [disabled]="!f.form.valid && !fileValid" (click)="createExperiment()">Submit</button>
</form>

然后在我的组件中:

  onChange(files: FileList, index: number, dom: any) {
    this.fileValid = false;

    // Option to parse the file with papaparse
    let options = {
      error: (err, file) => {
        alert(
          "Unable to parse CSV file, please verify the file can be accessed and try again. Error reason was: " +
            err.code
        );
        return;
      },
      complete: (results, file) => {
        console.log("Parsed:", results, file);
        let filename = file.name;

        // Add the dataset to the datasetList
        this.datasetList[index].values = results.data;
        this.fileValid = true;
        this.cd.detectChanges();
      }
    };
    this.fileSelected = files[0]; // Get the file
    // Call the function to parse the file, option is the callback
    this.papa.parse(this.fileSelected, options);
  }

  // Add a dataset form
  addDataset() {
    this.datasetList.push({});
  }

  // Remove a dataset form
  removeDataset(index: number) {
    this.datasetList.splice(index, 1);
  }

这工作正常。我使用 papaparse 读取文件并将其添加到 datasetList。但是，我的问题是我无法将“required”添加到输入文件中。但据我所读，它似乎不存在。

因此，我添加了一个变量“fileValid”来检查文件是否被正确选择。如果文件被正确解析，这个变量被初始化为 false 并更改为 true。然后，如果用户添加文件，此变量将更改为 false。但是，当用户删除 div 时，我不知道如何管理。例如:

• 如果我有 3 个 div 作为输入文件，其中两个没有选择文件。用户可以删除其中一个，变量“fileValid”仍应为 false。
• 如果我有 2 个 div 作为输入文件，其中一个被选中而另一个未被选中。如果用户删除了未选择的文件，则变量“fileValid”应为真。

我该如何管理它？或者还有其他方法吗？

Answer 1

与其尝试仅使用一个局部 bool 值来管理整个列表的有效性，不如考虑通过将局部 bool 值转换为 bool 值数组来增加局部 bool 值的维数。在这个数组中，每个索引将代表 datasetList 中位置索引处的关联数据集的文件有效性。

改变:

fileValid: boolean = false;

到:

fileValid: Array<boolean> = [false]; // ideally the length of this would be equal to datasetList, but you should be able to get away by not bothering to initialize to that end.

然后在你的 onChange 方法中:

this.fileValid[index] = false; // since you already conveniently have the index

或

this.fileValid[index] = true;

在您的[disabled] 部分的模板中，您可以使用类似"!isFileValid()"

的内容

它在你的组件中的位置:

isFileValid(): boolean {
  return this.fileValid.indexOf(false) == -1
}

希望对您有所帮助。