typescript - Angular 表單 onSubmit() 被其他按鈕觸發

我正在做一個 Angular 12 Material 應用程式。

我有一個像這樣的簡單表單

<form [formGroup]="form" class="normal-form" (ngSubmit)="onSubmit()">
  <mat-grid-list cols="2" rowHeight="300px">
    <mat-grid-tile>
      <div class="controles-container">
        <input type="hidden" formControlName="Id">
          <mat-label><strong>Active</strong></mat-label>
              <mat-slide-toggle formControlName="IsActive"
                  [checked]="checked">
              </mat-slide-toggle>
              <textarea matInput hidden></textarea>

        <mat-form-field>
          <input formControlName="Name" matInput  placeholder=" Notification Name" >
          <mat-error>This field is mandatory</mat-error>
        </mat-form-field>
        <mat-form-field>
          <mat-select formControlName="ProcessorName" placeholder="Processor Name">
            <ng-container *ngFor="let processors of dataSourceProcessors">
              <mat-option value="{{processors.Value}}">{{processors.Text}}</mat-option>
            </ng-container>
          </mat-select>
        </mat-form-field>
      </div>
    </mat-grid-tile>
    <mat-grid-tile>
      <div class="controles-container">
          <mat-label><strong>Channel</strong></mat-label>
          <li *ngFor="let chanel of dataSourceChannelLevel">
            <mat-checkbox id={{chanel.NotificationLogLevel.Id}} formControlName="Channel" (change)="onChangeEventFunc( $event)">
              {{chanel.NotificationLogLevel.Name}}
            </mat-checkbox>
          </li>
        <div class="button-row">
          <button mat-raised-button color="warn" (click)="onClose()">Close</button>
          <button mat-raised-button color="primary" type="submit" [disabled]="form.invalid">Create</button>
        </div>
      </div>
    </mat-grid-tile>
  </mat-grid-list>
</form>

在這個組件中我有這個

 form:FormGroup=new FormGroup({
    Id: new FormControl(null),
    Name: new FormControl('',Validators.required),
    IsActive: new FormControl(true),
    ProcessorName: new FormControl(0),
    Channel: new FormControl(''),
  });

我有兩個按鈕，一個是 Create 按鈕，它會呼叫 Form.Submit，另一個是 Close 按鈕……我遇到的問題是，當我按下 Close 按鈕時，它會呼叫 onClose() 函數，也會呼叫 Submit() 函數。

我缺少什麼？

謝謝

答案＃1

如果按鈕是提交按鈕，如果它位於表單內或與表單相關聯，且沒有 type="button"。請添加 type="button" 屬性，以避免觸發表單元素的 onsubmit 函數。

  <button mat-raised-button color="warn" (click)="onClose()" type="button">Close</button>