如何在angular 4中使用模板驱动表单发布表单数据

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm.value)">
  <div class="form-group">
    <label for="name">姓名</label>
    <input type="text" id="name" name="name" class="form-control" ngModel>
  </div>
  <div class="form-group">
    <label for="email">邮箱</label>
    <input type="email" id="email" name="email" class="form-control" ngModel>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.css']
})
export class MyFormComponent {
  onSubmit(formData: any) {
    // 处理表单数据
    console.log(formData);
  }
}

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    FormsModule
  ],
  declarations: [
    MyFormComponent
  ],
  exports: [
    MyFormComponent
  ]
})
export class MyFormModule { }

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MyFormModule } from './my-form/my-form.module';

@NgModule({
  imports: [
    BrowserModule,
    MyFormModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }