Angular子组件按钮意外触发父组件提交函数求助

问题根源 #

你的ImportCsvRiskAssessmentComponent子组件完全嵌套在父组件add-risk-assessment的<form>标签内部。在HTML规范中，<button>元素默认的type属性为submit，只要位于表单内，点击时就会自动触发表单的提交事件（也就是父组件绑定的ngSubmit="onSubmitAddRiskAssessment()"），这就是为什么子组件的所有按钮（包括未绑定点击事件的按钮）都会意外触发父组件的提交函数。

解决方案 #

给子组件内的所有按钮显式设置type="button"，覆盖默认的submit行为，让按钮仅执行绑定的点击逻辑：

修改子组件模板（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>
  <!-- 给Import按钮添加type="button" -->
  <button type="button" id="submitRiskAssessmentCsv" class="btn btn-outline-primary mr-2" (click)="importRiskAssessmentCsv()" [disabled]="csvFile === undefined">Import</button>
  <!-- 给Cancel按钮添加type="button" -->
  <button type="button" class="btn btn-outline-danger" (click)="cancelRiskAssessmentImport()">Cancel Import</button>
  
</div>
<div *ngIf="message" class="alert alert-success">
  {{message}}
</div>

额外优化：修复父组件的Cancel按钮 #

父组件中的Cancel按钮同样设置了type="submit"，点击时也会触发表单提交，建议一并修改：

<!-- 将type="submit"改为type="button" -->
<button (click)="cancelAddRA()" class="btn btn-outline-danger m-2" type="button">Cancel</button>

验证效果 #

修改完成后：

• 点击子组件的Import按钮，仅会执行importRiskAssessmentCsv()，不再触发父组件的onSubmitAddRiskAssessment()
• 点击子组件的Cancel Import按钮，仅会执行cancelRiskAssessmentImport()并触发cancelRiskAssessmentCsvImport事件，不会触发表单提交
• 父组件的Add Risk Assessment按钮保持type="submit"，正常触发原有表单提交逻辑

内容的提问来源于stack exchange，提问作者Anita