通过ngSubmit

Question

我在app.component.html文件中概述了一个表单，如下所示，当我单击“发送”按钮提交表单时，我的Javascript错误提示chatForm未定义。

我看过一些不同的教程，但似乎找不到为什么此功能没有按预期运行的原因。我究竟做错了什么？

当我提交表单时，如何获取表单中存在的输入值？我在表单上定义了一个message的名称，如何使用此变量？

app.component.html

<div class="container">
    <h2>Message Form</h2>
    <form (ngSubmit)="sendMessage(chatForm)" #chatForm="ngForm">
        <div>
            <label for="message">Message</label>
            <input type="text" id="message" name="message" [(ngModel)]="message" required>
        </div>
        <button type="submit" id="sendmessage" [disabled]="!chatForm.valid">
            Send
        </button>
    </form>
</div>

app.component.ts

public sendMessage(form): void {
    console.log("Message sent: " + form.value);
}

Answer 1

您应该使用

获取数据

form.value.message

我的示例如下

  <form (ngSubmit)="onSubmit(registerForm)" #registerForm="ngForm">
    <div class="form-group">
      <label for="UserName">Your email</label>
      <input
        type="text"
        ngModel
        class="form-control"
        id="UserName"
        name="UserName"
        required
      />

然后在我的组件中，我可以像这样访问表单数据

onSubmit(formValue: NgForm) {
    const registerModel: AccountModel = {
      UserName: formValue.value.UserName,
      Password: formValue.value.Password
    };