通過 ngSubmit 提交時未定義角度形式

Question

我的 app.component.html 文件中有一個如下所示的表單，當我單擊“發送”按鈕提交表單時，我的 Javascript 中出現錯誤，提示 chatForm 未定義。

我看過一些不同的教程，但似乎無法找到為什么此功能未按預期運行的原因。 我究竟做錯了什么？

另外，當我提交表單時，如何獲取表單中存在的輸入值？ 我在表單上定義了一個message名稱，我該如何使用這個變量？

應用程序組件.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
    };