Angular 4 - Error: formControlName must be used with a parent formGroup directive : <p>I am adding <code>form</code> input fields using component -</p>

<p><em>engine-add-contact-form.html</em></p>

<pre><code>&lt;form (ngSubmit)="onSubmit()" [formGroup]="contact_form"&gt;
&lt;md-tab-group&gt;
    &lt;md-tab label="Form"&gt;
        &lt;ang-form&gt;&lt;/ang-form&gt;
    &lt;/md-tab&gt;
    &lt;md-tab label="Email"&gt;
        &lt;ang-email&gt;&lt;/ang-email&gt;
    &lt;/md-tab&gt;
    &lt;md-tab label="Message"&gt;
        &lt;ang-message&gt;&lt;/ang-message&gt;
    &lt;/md-tab&gt;
&lt;/md-tab-group&gt;
&lt;button md-raised-button type="submit"&gt;Publish&lt;/button&gt;
</code></pre>

<p></p>

<p><em>ang-form.html</em></p>

<pre><code>&lt;div class="form-grid form-title"&gt;
     &lt;md-input-container&gt;
         &lt;input formControlName="contact_form_title" 
        class="form-title-field" mdInput placeholder="Title" value=""&gt;
     &lt;/md-input-container&gt;
&lt;/div&gt;
</code></pre>

<p>Using same way i added other components (<code>ang-email ang-message</code>) html.</p>

<p>I added <code>[formGroup]</code> directive at <code>engine-add-form.ts</code> </p>

<pre><code>export class EngineAddFormComponent{

contact_form: any;

form_value: any;

constructor(){
    this.contact_form = new FormGroup({
        contact_form_title: new FormControl('', Validators.minLength(2)),
        ........
        ........
    });
}
onSubmit(){
    this.form_value = JSON.stringify(this.contact_form.value);
    console.log(this.form_value);
}
}
</code></pre>

<p>I get following error - </p>

<blockquote>
  <p>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).</p>
</blockquote>

<p>I can't understand what is wrong with my code.</p>
