Angular 如何防止在取消的“角度材质”对话框中提交表单？

我有一个Angular Material对话框，其中包含一个在后端Firestore数据库中创建对象的表单

表单中有两个按钮，一个调用submit，另一个调用cancel，但即使单击cancel，cancel处理程序也会运行，然后submit处理程序会运行，尽管我看不到它是如何调用的

这里有什么问题

@Component({
  selector: 'app-create-budget',
  templateUrl: './create-budget.component.html',
  styleUrls: ['./create-budget.component.css']
})
export class CreateBudgetComponent implements OnInit {

  myForm: FormGroup;
  success=false;
  constructor(public dialogref: MatDialogRef<CreateBudgetComponent>, private fb : FormBuilder, private auth : AuthService, private budgetService: BudgetService ) { }

  ngOnInit(): void {
    this.myForm = this.fb.group( {
      name: ['',[Validators.required, Validators.minLength(2)]],
      revision: '1',
      masterCurrency: 'USD',
      owner: this.auth.userId,
      creationDate: Date.now(),
      description: ''
    })
    this.myForm.valueChanges.subscribe(console.log);
  }

  async submitHandler() {
    console.log("starting submit");
    const formValue : Budget = this.myForm.value;
    try {
      await this.budgetService.addNewBudget(formValue);
      this.dialogref.close();
    } catch(err) {
      console.error(err)
    }
  } 

  cancel() {
    console.log("Cancelled!");
    this.dialogref.close();
  }

  get name() {
    return this.myForm.get('name');
  }
  get masterCurrency() {
    return this.myForm.get('masterCurrency');
  }

}

尝试添加type=按钮

... 不要介意。 ...

---

我没有使用过这个函数，但听起来像是需要从JS函数true/false/0/1等返回一些东西来阻止回发。

<h1 mat-dialog-title>Create New Budget</h1>
<div mat-dialog-content>
    <form [formGroup]="myForm" [hidden]="success" (ngSubmit)="submitHandler()">
        <mat-form-field>
            <input matInput placeholder="Budget Name" 
             formControlName="name">
             <mat-error *ngIf="name.invalid && name.touched">
                 A name (2 char min) is required. 
             </mat-error>
        </mat-form-field>  
        <mat-form-field>
            <input matInput placeholder="Revision" formControlName="revision">
        </mat-form-field>
        <mat-form-field>
            <textarea matInput placeholder="Description" 
            formControlName="description"></textarea> 
        </mat-form-field>
        <br>
        <button mat-raised-button color="primary" type="submit" [disabled]="myForm.invalid"  >Ok</button>
        <button mat-raised-button   (click)="cancel()">Never mind.</button>
    </form>
</div>

Cancelled!
create-budget.component.ts:38 starting submit
VM6:1 XHR finished loading: POST "https://firestore.googleapis.com/google.firestore.v1.Firestore/Write/channel?database=projects...