I would like to create a form and use a new, custom component for its controls. So I created a new component and included it into the parent form. But although the parent form has a formGroup, Angular complains that it does not.

The error: 

> 
> Error: formControlName must be used with a parent formGroup directive.
>  You'll want to add a formGroup
>  directive and pass it an existing FormGroup instance (you can create one in your class).
> 
> 
> 

The parent form has:

```
<form [formGroup]="learningObjectForm" (ngSubmit)="onSubmit()" novalidate>
  <div>
    <button type="submit"
            [disabled]="learningObjectForm.pristine">Save</button>
  </div>

  <ava-form-control [label]="'Resource'"></ava-form-control>

</form>

```

And in the .ts:

```
  constructor(private fb: FormBuilder) {
    this.createForm();
  }

  createForm() {
    this.learningObjectForm = this.fb.group({
      text: '',
    });
  }

```

In the custom component I have

```
import { Component, Input, OnInit }       from '@angular/core';

@Component({
  selector: 'ava-form-control',
  template: `  <div>
    <label>{{label}} :</label>
    <input formControlName="{{name}}">
  </div>
`
})
export class FormControlComponent implements OnInit {

  @Input() label: string;
  @Input() name: string;

  constructor() {}

  ngOnInit() {
    if (this.name === undefined) {
      // turns 'The Label' into 'theLabel'
      this.name = this.label[0].toLowerCase().concat(this.label.slice(1));
      this.name = this.name.split(' ').join('');
      console.log(this.label, this.name);
    }
  }
}

```