如何防止表单在取消的 Angular Material 对话框中提交？

Question

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

我在表单中有两个按钮，一个调用提交，另一个调用取消，但即使我单击取消，取消处理程序也会运行，然后提交处理程序会运行，即使我看不到它是如何被调用的。

这里有什么问题？

@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');
  }

}

形式：

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

Answer 1

尝试添加type=button

...
<button (click)="cancel()" type="button">Never mind.</button>
...