通过 ngSubmit 提交时未定义 Angular 表单

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
    };