[SOLVED] Angular Form onSubmit() is called by other button


I am doing an Angular 12 Material App.

I have a simple Form like this

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

          <input formControlName="Name" matInput  placeholder=" Notification Name" >
          <mat-error>This field is mandatory</mat-error>
          <mat-select formControlName="ProcessorName" placeholder="Processor Name">
            <ng-container *ngFor="let processors of dataSourceProcessors">
              <mat-option value="{{processors.Value}}">{{processors.Text}}</mat-option>
      <div class="controles-container">
          <li *ngFor="let chanel of dataSourceChannelLevel">
            <mat-checkbox id={{chanel.NotificationLogLevel.Id}} formControlName="Channel" (change)="onChangeEventFunc( $event)">
        <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>

In the component I have this

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

I have two buttons, Create that call Form.Submit, and Close button…
The problem I have is that when I call Close button, it calls onClose() function and also Submit() function.

What I am missing?



If the button is a submit button If it’s inside/associated with a form and doesn’t have type="button". Add type="button" attribute to avoid triggering onsubmit function on form element.

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

Answered By – Chellappan வ

Answer Checked By – Jay B. (BugsFixing Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *