NgSubmit不起作用按钮已经在表单内

问题描述

提交表单时，不会调用我创建的onSubmit（）函数。我已经搜索过，但是其他答案主要是按钮不在表单之外，而不是我的情况，也许我遗漏了一些东西。

HTML：

    <form ng-submit="onSubmit()" [formGroup]="messageForm">
        <fieldset>
            <label for="name">Nome e Sobrenome</label>
            <input type="text" name="name" id="name" required formControlName="name">
            <label for="email">Email</label>
            <input type="email" name="email" id="email" required>
            <label for="tel">Telefone</label>
            <input type="text" name="tel" id="tel" required>
        </fieldset>
        <fieldset>
            <label for="message">Mensagem</label>
            <textarea name="message" id="message" cols="30" rows="10" required></textarea>
            <button type="submit">Enviar</button>
        </fieldset>
    </form>

COMPONENT.TS

    export class ContatoComponent{
      title="Entre em contato conosco";
      messageForm = new FormGroup({
      name: new FormControl(""),email: new FormControl(""),tel: new FormControl(""),message: new FormControl("")
      })

   constructor() { }

   onSubmit(){
      console.log("oi")
    }

 }

解决方法

我已经消除了丢失的内容！在app.module.ts内部，我没有导入ReactiveFormsModule。如果有人遇到相同的问题，请给出以下答案：

在app.module.ts内部：

    import { ReactiveFormsModule } from '@angular/forms';

    imports:[
      ...
      ReactiveFormsModule
    ]

我猜，ng-submit 不是 ng-submit try (ngSubmit)，而是用于旧版本。它对我有用。只是改变

(ng-submit)="onSubmit()"

到

(ngSubmit)="onSubmit()"

form-submit forms