How to get input data from mat-expansion panel-body?

Question

I'm trying to get the input data of the form. The whole page refreshes when I use the 'onSubmit' function and if I use the 'click' function the data will appear empty. I know the form is causing the problem, but I need the data from the form-fields.

<mat-accordion>
  <mat-expansion-panel [togglePosition]="'before'">
    <mat-expansion-panel-header>
      <mat-icon [svgIcon]="'heroicons_outline:inbox-in'"></mat-icon>
      <mat-panel-title>Invite user</mat-panel-title>
    </mat-expansion-panel-header>
    <div class="ExpansionPanelBody pointerOn">
      <form class="mt-8" [formGroup]="inviteForm">
        <mat-form-field>
          <mat-label>Message</mat-label>
          <input [formControlName]="'message'" matInput type="text" />
        </mat-form-field>

        <mat-form-field>
          <mat-label>Email</mat-label>
          <input
            [formControlName]="'email'"
            matInput
            type="email"
            maxlength="30"
          />
        </mat-form-field>
      </form>
      <mat-action-row>
        <button
          (click)="sendInvite()"
          type="submit"
          mat-button
          color="primary"
        >
          Send invite
        </button>
      </mat-action-row>
    </div>
  </mat-expansion-panel>

.ts file:

  this.inviteForm = new FormGroup({
      message: new FormControl(''),
      email: new FormControl('', [Validators.required, Validators.email]),
    });

  sendInvite(): void {
    console.log(this.inviteForm.value);
  }

Answer 1

The problem is your send button, which is outside of your form, so Angular cannot catch the submit event (that's why your try with ngSubmit doesn't work).

Also, verify if you don't forget to import the ReactiveFormModule inside your module.

If it's impossible to put it inside, just replace your button type by "button" to prevent the page refresh.