Question

我有一个角度材质对话框，里面有一个模板驱动形式。当我点击提交按钮时效果很好但是当我点击取消按钮时，也会调用onSubmit（）函数。怎么预防？这是我的代码段

＆＃13;

// 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() {}
}

＆＃13;

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

＆＃13;

Answer 1

明确地放置type="button"以避免按钮触发表单提交

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

您检查规范here请注意默认行为是submit，除非另有说明。

Answer 2

模板更改：

(click)="onNoClick($event)"

组件变更：

onNoClick(event:any): void {
  event.stopPropagation();
  ........//Your existing code
  this.dialogRef.close();
}

要了解更多信息，请阅读：https://javascript.info/bubbling-and-capturing

Answer 3

在我的模板中，我从<button mat-button (click)="onNoClick()">Cancel</button>更改为<button mat-button [mat-dialog-close]="data" (click)="onNoClick()">Cancel</button> 不知怎的，它阻止调用onSubmit（）函数。

Answer 4

只需从取消按钮中删除(click)="onClick()"即可。

这将解决您的问题

如何防止点击取消按钮时调用onSubmit（）函数

4 个答案: