家长对子按钮 Angular 的意外反应

Question

我有一个 ImportCsvRiskAssessmentComponent 子组件。父组件是添加风险评估。当我单击子组件的“导入”按钮时，将启动 onSubmitAddRiskAssessment() 函数。对于我在子组件中创建的任何按钮都是如此，即使它们没有（单击）属性。

你能帮我理解为什么吗？

导入-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>

导入-csv-风险评估.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);
  }
}

添加风险评估.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>

添加风险评估.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()
  }
}

我希望“导入”按钮仅调用子组件的 importRiskAssessmentCsv() 函数。

Answer 1

我认为这里的问题可能是您的其他一些按钮已设置为 type="submit"，当您单击它们时，它将触发提交表单（ngSubmit 事件正在等待），然后函数 onSubmitAddRiskAssessment() 将是活跃。