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格，并且选择了其中一个，而未选择另一个。如果用户删除了未选中的变量，则变量“ fileValid”应为true。

我该如何管理？还是还有其他方法？

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
}

希望有帮助。

需要角输入文件

1 个答案: