angular - サブコンポーネントに ngControl を配置する「No provider Exception」を取得しました

Question

Angular2 (TypeScript と Jade を使用) を使用してカスタム フォームを実装したいと考えています。

my-inputの代わりにカスタム フォーム コンポーネントとして作成した要素を使用し、ディレクティブをinput追加すると、「ControlContainer のプロバイダーがありません!」という例外エラーが発生しました。次に、要素から削除すると、エラーは発生しませんでしたが、フォーム機能は機能しませんでした (バリデータなど)。ngControlinputngControlinput

親コンポーネント

@Component({
  selector: 'top-page',
  template: `
    <form [ngFormModel]="myForm">
      <my-input name="username" placeholder="username is here.">
    </form>
  `,
});
export class TopPageComponent { ... }

サブコンポーネント

@Component({
  selector: 'my-input',
  template: `
    <label class="custom-class-1">
      <div class="custom-class-2"></div>
      <input type="text" id="{{name}}" placeholder="{{placeholder}}" ngControl="{{name}}" [(ngModel)]="{{name}}">
    </label>
  `,
});
export class MyInputComponent { ... }

試しに、コンポーネントの要素にngControlGroupディレクティブを追加しましたが、エラーが発生しました。(もちろん、TypeScript ファイルに書かれています。)labelmy-inputimport Component, Input, etc...@Input()