需要角度输入文件

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。但是，我的问题是我无法在输入文件中添加“必需”。但就我所读的，它似乎不存在。

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

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

我该如何管理它？ 还是有别的办法？

Answer 1

您应该考虑通过将本地布尔值转换为布尔值数组来增加本地布尔值的维度，而不是尝试仅使用单个本地布尔值来管理整个列表的有效性。在这个数组中，每个索引将代表数据集列表中位置索引处关联数据集的文件有效性。

变化：

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
}

希望对你有帮助。