Question

我正在尝试创建具有2个输入字段的角形，在提交时将这些字段的值发布到相应地处理它们的函数中

我确保正确导入了FormsModule和NgForm

  <div class="modal-body">

    <form class="example-form" (submit)="createNewPartySubmit(newPartyForm)" #newPartyForm="ngForm">
      <mat-form-field class="input-field" floatLabel="auto">
        <mat-label>Name</mat-label>
        <input matInput name="name" type="text" [ngModel]="newPartyItem?.name" required #name="ngModel" />
      </mat-form-field>

      <mat-form-field class="input-field" floatLabel="auto">
        <mat-label>Country</mat-label>
        <input matInput name="country" type="text" [ngModel]="newPartyItem?.country" required #country="ngModel" />
      </mat-form-field>
      <div class="modal-footer">
        <button mat-button type="submit" class="btn btn-primary primary" (click)="createNewPartySubmit()">Submit</button>
      </div>
    </form>
  </div>
</div>

和功能处理如下

  createNewPartySubmit(newPartyForm: NgForm) {
    console.log(newPartyForm);
  }

打印输出未定义

Answer 1

在函数声明中以CreateNewPartSubmit（$ event）的形式尝试

Answer 2

问题是当前“提交”按钮上的处理程序(click)="createNewPartySubmit()"。它正在传递undefined / null有效负载。使用按钮type="submit"，默认情况下，单击按钮将触发一个提交事件，您已经由(submit)="createNewPartySubmit(newPartyForm)"标签上的<form>处理了该事件。

更改：

<button mat-button type="submit" class="btn btn-primary primary" (click)="createNewPartySubmit()">Submit</button>

收件人：

<button mat-button type="submit" class="btn btn-primary primary">Submit</button>

这不仅将避免触发重复事件（单击+提交），而且避免将undefined / null有效负载传递给createNewPartySubmit，这是通过此{{1}进行的操作}处理程序。

希望有帮助！

Answer 3

您不需要调用createNewPartySubmit方法两次，您可以将其从<form ...>部分或按钮上的click()侦听器中删除。

由于使用的是模板驱动的方法，因此必须将局部变量作为函数的参数传递，因此createNewPartySubmit应该类似于createNewPartySubmit(newPartyForm)。

在console.log上，您应该使用.value打印所需的内容。

html

<form class="example-form" #newPartyForm="ngForm">
  <mat-form-field class="input-field" floatLabel="auto">
    <mat-label>Name</mat-label>
    <input matInput name="name" type="text" [ngModel]="newPartyItem?.name" required #name="ngModel" />
  </mat-form-field>

  <mat-form-field class="input-field" floatLabel="auto">
    <mat-label>Country</mat-label>
    <input matInput name="country" type="text" [ngModel]="newPartyItem?.country" required #country="ngModel" />
  </mat-form-field>
  <div class="modal-footer">
    <button mat-button type="submit" class="btn btn-primary primary" (click)="createNewPartySubmit(newPartyForm)">Submit</button>
  </div>
</form>

ts

reateNewPartySubmit(newPartyForm: NgForm) {
    console.log(newPartyForm.value);
}

Answer 4

有两个问题，第一个问题是您两次调用方法createNewPartySubmit。

因此更改：

<button mat-button type="submit" class="btn btn-primary primary" (click)="createNewPartySubmit()">Submit</button>

收件人：

<button mat-button type="submit" class="btn btn-primary primary">Submit</button>

另一件事将（提交）更改为（ngSubmit）：

<form class="example-form" (submit)="createNewPartySubmit(newPartyForm)" #newPartyForm="ngForm">

收件人

<form class="example-form" (ngSubmit)="createNewPartySubmit(newPartyForm)" #newPartyForm="ngForm">

希望我能帮助您。

角形式不返回绑定对象

4 个答案:

html

ts