I'm currently working with Angular 9 and I am facing an issue with a form that includes a checkbox. The form is designed in a way that when the user clicks the save button, it should fill in the name field. However, I have noticed that when the checkbox is active and the user presses enter, it triggers the operation (saveUser()), which shouldn't happen. How can I resolve this issue?
<form [formGroup]="userF" (ngSubmit)="onSubmit()">
<div class="col-xs-12">
<mat-form-field class="mat_input">
<mat-label>name</mat-label>
<input type="text" matInput formControlName="firstName">
</mat-form-field>
</div>
<div class="col-xs-12">
<mat-form-field class="mat_input">
<mat-label>lastName</mat-label>
<input type="text" matInput formControlName="lastName">
</mat-form-field>
</div>
<div class="col-xs-12 div_checkbox">
<mat-checkbox formControlName="delegate">delegate</mat-checkbox>
</div>
<button class="btn" type="submit" [disabled]="!userF.valid">save</button>
</form>