Strange behaviour when using reactive forms

Issue

I am currently working on a big form using reactive forms on Angular. It is not that complex, but it has a lot of fields. In some fields, I want to open a modal when I click a button and, inside that modal, call the backend and retrieve some data, select the data I want, and assign that to the input text. My problem is not with that, my problem comes when I click the button to search that data and fires the submit event of the form. I provide some code for better understanding.

form.component.html

<form
  [formGroup]="myForm"
  (ngSubmit)="seeFormData(myForm.value)"
>
  <div class="grid">
    <div class="col-2">
      <picklist-component></picklist-component>
    </div>

    <div class="col-5">
      
      ... some inputs ...      
      
      <div class="fooClass">
        <span>Field 1: </span>
        <div class="barClass">
          <input type="text" pInputText disabled placeholder="Random placeholder" />
          <button
            pButton
            class="p-button btn"
            icon="pi pi-search"
            (click)="openModal()"
          ></button>
        </div>
      </div>
    </div>

    <div class="col-5">

     ... some other inputs ...

      <div class="fooClass">
        <span>Field 2: </span>
        <div class="barClass">
          <input type="text" pInputText disabled placeholder="Random placeholder" />
          <button
            pButton
            class="p-button btn"
            icon="pi pi-search"
            (click)="openModal()"
          ></button>
        </div>
      </div>
      
      <button
        pButton
        label="See data"
        class="p-button"
        icon="pi pi-external-link"
        type="submit"
      ></button>
    </div>
  </div>
</form>

form.component.ts

Some methods in order to open/close the modal:

  openModal() {
    this.display = true;
  }

  closeModal() {
    this.display = false;
  }

Method to show on console the data from the form:

  seeFormData(form: any) {
    console.log(form);
  }

I do not provide the rest of the code because the form is working fine, it shows what it must show, so I consider it is not required here.

As you can see, none of the buttons for opening the modal has any submit event or anything related to the form, they just should open the modal, but since I am very new with Angular, and even newer with reactive forms, I do not really know if I am doing it the right way.

Solution

Default type for button is "submit" try changing the type to "button" should fix your issue something like

<button type="button" pButton class="p-button btn" icon="pi pi-search (click)="openModal()" ></button>

Answered By - jitender