One feature of my form is that it consists of a parent component and a child component.
To disable a button within the form, I utilize a function called isDatasetFilesValid() which checks a specific variable (datasetList[i].fileValid). This variable is modified within the child component.
The issue arises when this modification takes place within a callback during file parsing using papaparse. Due to this being done in a callback, the parent component does not immediately register the change. This is evident as if the variable is altered outside the callback, the button becomes available.
This particular variable acts as an indicator to ensure a file has been selected.
I attempted to include "detectChanges()" in order to resolve this, but unfortunately, it did not yield the desired outcome.
Parent component:
export class ExperimentCreateComponent implements OnInit {
datasetList: any = [{ fileValid: false }];
isDatasetFilesValid() {
let index = this.datasetList.findIndex(function(item, i) {
return item.fileValid == false;
});
let test = index === -1 ? true : false;
console.log("Dataset", index + " -> " + test);
return test;
}
}
Parent html:
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-sm-8 offset-sm-2">
<form name="form" (ngSubmit)="f.form.valid" #f="ngForm" novalidate>
<app-creation-dataset [datasetList]="datasetList"></app-creation-dataset>
<button mat-button color="primary" type="submit" [disabled]="!isDatasetFilesValid()" (click)="createExperiment()">Submit</button>
</form>
</div>
</div>
</div>
</div>
Child Component:
export class CreationDatasetComponent implements OnInit {
@Input() datasetList: any = [{ fileValid: false }];
fileSelected: File;
constructor(private papa: Papa, private cd: ChangeDetectorRef) {}
ngOnInit() {}
onChange(files: FileList, index: number, dom: any) {
// Option to parse the file with papaparse
let options = {
header: true,
error: (err, file) => {
this.datasetList[index].fileValid = false;
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].headers = results.meta.fields;
this.datasetList[index].values = results.data;
this.datasetList[index].filename = filename;
this.datasetList[index].is_metadata = false;
this.datasetList[index].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);
}
}
Child HTML:
<div *ngFor="let dataset of datasetList; let index = index">
<div id="datasetFiles">
<h6>Select the type of dataset and 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>
</div>
</div>
</div>
<div>