Angular 通过 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
    };

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

Angular form is undefined when submitting via ngSubmit

javascript

angular

typescript

single-page-application

angular8