将自定义指令应用于表单

Question

我正在尝试添加一个自定义指令，该指令将捕获submit事件并执行一些操作。

这是我要创建的指令：

import { Directive, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Directive({
  selector: '[validate-form]',
  host: {
    '(ngSubmit)': 'onSubmit($event)'
  }
})
export class FormValidationDirective implements OnInit  {

  constructor(
    public form: FormGroup
  ) {}

  ngOnInit() {

  }

  onSubmit($event) {
    console.warn("submit");
  }
}

由于我是从共享模块中使用它的，所以这是我声明的方式：

@NgModule({
  declarations: [
    FormValidationDirective,
    //...
  ],
  imports: [
    CommonModule,
    //...
  ],
  exports: [
    FormValidationDirective,
    //...
  ]
})
export class mySharedModule { }

这就是我在模板中的称呼方式：

<form validate-form [formGroup]="myForm" (ngSubmit)="submit()">

，但访问组件页面的结果是错误：

 StaticInjectorError(Platform: core)[FormValidationDirective -> FormGroup]: 
    NullInjectorError: No provider for FormGroup!