Issue
I have a ImportCsvRiskAssessmentComponent child component. The parent component is add-risk-assessment. When I click on the "Import" button of the child component, the onSubmitAddRiskAssessment() function is launched. And it's true for any button that I create in the child component, even if thay don't have a (click) attribute.
Can you please help me to understand why ?
import-csv-risk-assessment.component.html
<div *ngIf="showRiskAssassmentCsvForm">
<div class="mb-3 row">
<label for="csvFile" class="form-label">Select Risk Assessment csv file :</label>
<input type="file" id="csvFile" accept=".csv" (change)="onFileChange($event)">
</div>
<button id="submitRiskAssessmentCsv" class="btn btn-outline-primary mr-2" (click)="importRiskAssessmentCsv()" [disabled]="csvFile === undefined">Import</button>
<button class="btn btn-outline-danger" (click)="cancelRiskAssessmentImport()">Cancel Import</button>
</div>
<div *ngIf="message" class="alert alert-success">
{{message}}
</div>
import-csv-risk-assessment.component.ts
export class ImportCsvRiskAssessmentComponent {
@Output() riskAssessmentFromRiskAssessmentCsv = new EventEmitter<RiskAssessmentModel>();
@Output() cancelRiskAssessmentCsvImport = new EventEmitter<boolean>();
@ViewChild('fileInput') fileInput: any;
riskAssessment = new RiskAssessmentModel('NewRiskAssessment','', 0, 1, '', [],);
csvFile: any;
message!: string;
isRiskAssessmentCsvSubmitted = false;
showRiskAssassmentCsvForm = true;
constructor(private ngxCsvParser: NgxCsvParser) {}
public importRiskAssessmentCsv(): void {
this.isRiskAssessmentCsvSubmitted = true;
this.sendParametersFromCSV(this.csvFile);
}
public onFileChange(event: any): void {
this.csvFile = event.target.files[0];
console.log("onfile change", this.csvFile);
}
public sendParametersFromCSV(csvFile: any) {
...
}
[...]
public cancelRiskAssessmentImport() {
const importRiskAssessmentCSV = false;
this.cancelRiskAssessmentCsvImport.emit(importRiskAssessmentCSV);
}
}
add-risk-assessment.component.html
<div class="modal-header">
<h4 class="modal-title" id="modal-delete-riskAssessment">Add Risk Assessment</h4>
</div>
<div class="modal-body">
<form [formGroup]="newRAForm" (ngSubmit)="onSubmitAddRiskAssessment()">
<div class="mb-3 row">
<label for="csvFile" class="form-label">Risk Assessment name :</label>
<input class="form-control" type="text" id="name" formControlName="name">
<div *ngIf="newRAForm.get('name')?.status === 'INVALID'&&
(newRAForm.get('name')?.dirty ||
newRAForm.get('name')?.touched) ||
isSubmitted">
<app-validation-errors [errors]="newRAForm.get('name')?.errors"></app-validation-errors>
</div>
</div>
<!-- For csv dataset parameters names import -->
<div class="mb-3 row" *ngIf="!importCSV">
<button (click)="activeImport()" class="btn btn-outline-primary" [disabled]="importRiskAssessmentCSV">Import parameters from .csv dataset</button>
</div>
<div class="mb-3 row" *ngIf="importCSV">
<app-import-csv-dataset (tableDataFromCsv)="onTableDataFromCsv($event)"
(datasetName)="onDatasetNameFromCsv($event)"
(cancelCsvImport)="onCancelCsvImport($event)">
</app-import-csv-dataset>
</div>
<!-- For riskAssessment from .csv RiskAssessment import -->
<div id="importRiskAssessmentCsvDiv">
<div class="mb-3 row" *ngIf="!importRiskAssessmentCSV">
<button (click)="activeRiskAssessmentCsvImport()" class="btn btn-outline-primary" [disabled]="importCSV">Import risk assessment from .csv risk assessment</button>
</div>
<div class="mb-3 row" *ngIf="importRiskAssessmentCSV">
<app-import-csv-risk-assessment (riskAssessmentFromRiskAssessmentCsv)="onRiskAssessmentFromCsv($event)"
(cancelRiskAssessmentCsvImport)="onCancelRiskAssessmentCsvImport($event)">
</app-import-csv-risk-assessment>
</div>
</div>
<button class="btn btn-primary m-2" type="submit" [disabled]="newRAForm.invalid">Add Risk Assessment</button>
<button (click)="cancelAddRA()" class="btn btn-outline-danger m-2" type="submit">Cancel</button>
</form>
</div>
add-risk-assessment.component.ts
export class AddRiskAssessmentComponent {
@Output() addNewRiskAssessment: EventEmitter<RiskAssessmentModel> = new EventEmitter<RiskAssessmentModel>();
@Output() hideAddRAForm = new EventEmitter();
newRiskAssessment = new RiskAssessmentModel('NewRiskAssessment','', 0, 1, '', []);
newRAForm: FormGroup;
isSubmitted = false;
// For table data parameters names from csv dataset import
importCSV = false;
// For tableData from csv risk assessment tableData import
importTableDataCSV = false;
// For riskAssessement from csv risk assessment tableData import
importRiskAssessmentCSV = false;
constructor(private formBuilder: FormBuilder) {
this.newRAForm = this.formBuilder.group({
name: ['', Validators.required]
})
}
public onSubmitAddRiskAssessment(): void {
this.isSubmitted = true;
if (this.newRAForm.valid) {
const formData = this.newRAForm.value;
// console.log('ligne ajoutee', formData);
this.newRiskAssessment.name = formData.name;
console.log("ONSUBMIT", this.newRiskAssessment);
// Emit changes to parent risk-assessment
this.addNewRiskAssessment.emit(this.newRiskAssessment);
this.isSubmitted = false;
} else {
// Handling of validation errors, e.g. display of an error message
console.log('Le formulaire est invalide. Veuillez corriger les erreurs.');
const controls = this.newRAForm.controls;
for (const name in controls) {
if (controls[name].invalid) {
console.log("controles {{name}}", name, controls[name]);
}
}
}
}
[...]
// Import RiskAssessment from RiskAssessment csv file
public onRiskAssessmentFromCsv(riskAssessment: RiskAssessmentModel): void {
this.newRiskAssessment = riskAssessment;
}
public activeRiskAssessmentCsvImport() {
this.importRiskAssessmentCSV = true;
}
public onCancelRiskAssessmentCsvImport(importRACSV: boolean): void {
console.log("AddRACompoNewRAAOnCancelRiskassessmentCsvImport",this.newRiskAssessment);
this.importRiskAssessmentCSV = importRACSV;
}
public cancelAddRA() {
this.hideAddRAForm.emit()
}
}
I expect the "Import" button to only call the importRiskAssessmentCsv() function of the child component.
Solution
I think the problem here can be your some other buttons have been set with type="submit" and when you click on them, it will trigger to submit the form (ngSubmit event waiting for that) and then function onSubmitAddRiskAssessment() will be active.
Answered By - Tanny Nguyen
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.