如何从 mat-expansion panel-body 获取输入数据？

Question

我正在尝试获取表单的输入数据。 当我使用“onSubmit”功能时，整个页面都会刷新，如果我使用“click”功能，数据将显示为空。 我知道表单是导致问题的原因，但我需要表单字段中的数据。

<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 文件：

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

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

Answer 1

问题是您的发送按钮，它在您的表单之外，因此 Angular 无法捕获提交事件（这就是您尝试使用ngSubmit不起作用的原因）。

另外，验证您是否忘记在模块中导入ReactiveFormModule 。

如果无法将其放入其中，只需将您的按钮类型替换为"button"以防止页面刷新。