angular - 如何防止在单击取消按钮时调用 onSubmit() 函数

Question

我有一个 Angular Material 对话框，里面有一个模板驱动的表单。当我点击提交按钮时它运行良好但是当我点击取消按钮时也会调用 onSubmit() 函数。如何防止呢？这是我的代码片段

// ts file
export class RejectPopupComponent implements OnInit {
   submitted:boolean=false;
  comment: string;
  loanID: string;
  createdDate: string;
  constructor(
    private dataService: DataService,
    public dialogRef: MatDialogRef<RejectPopupComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {
    this.dataService.loanIdSource.subscribe(loanID => (this.loanID = loanID));
    console.log(this.loanID);

    this.dataService.applicationDateSource.subscribe(
      applicationDate => (this.createdDate = applicationDate)
    );
    console.log(this.loanID, this.createdDate);
  }
 
  onNoClick(): void {
    this.dialogRef.close();
  }

     onSubmit(form:any){
      console.log('hello')
    console.log(form);
       const statusDecisionInput = { loanID: "", createdDate: "", approverAction: "Rejected", reasonToReject: '' };
   statusDecisionInput.loanID = this.loanID;
   statusDecisionInput.createdDate = this.createdDate;
   statusDecisionInput.reasonToReject = form.reasonToReject;
   console.log(statusDecisionInput);
    this.submitted=true;
  }


  ngOnInit() {}
}

 <form #f="ngForm" (ngSubmit)="onSubmit(f.value)">
<div mat-dialog-content>
  <p>Why are you rejecting?</p>
    <textarea matInput rows="10" cols="38"  placeholder="Leave a comment" name="reasonToReject" ngModel required></textarea>
  </div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">Cancel</button>
  <button mat-button class="submit-button" type='submit' 
  [disabled]="f.invalid" cdkFocusInitial (click)="onNoClick()">Submit</button> 
</div>
</form>

Answer 1

显式放置 type="button" 以避免按钮触发表单提交

<button mat-button type="button" (click)="onNoClick()">Cancel</button>

您可以查看规范 here请注意，除非另有说明，否则默认行为是提交。