title: Error: formControlName must be used with a parent formGroup directive. You'll want to add a formGroup directive - Angular reactive forms
body: <p>I have the following template. I'm trying to get to grips with reactive forms but am having a problem.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;form [formGroup]=&quot;guestForm&quot; novalidate&gt;
      &lt;div class=&quot;panel-body&quot;&gt;
          &lt;form&gt;
              &lt;div class=&quot;col-md-12 col-sm-12&quot;&gt;
                  &lt;div class=&quot;form-group col-md-3 col-sm-6&quot;&gt;
                      &lt;label&gt;First Name*  &lt;/label&gt;
                      &lt;input formControlName=&quot;firstname&quot; type=&quot;text&quot; class=&quot;form-control input-sm&quot;&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  <p>Then in my component I have:</p>
  <pre class="lang-js prettyprint-override"><code>@Component({
      selector: 'guest-input',
      templateUrl: './guest-input.component.html',
  })
  export class GuestInputComponent implements OnInit {
      @Input()
      guest: Guest;
  
      guestForm: FormGroup;
      
      constructor(private _fb: FormBuilder) { }
  
      ngOnInit() {
          this.guestForm = this._fb.group({
              firstname: ['test', [Validators.required, Validators.minLength(3)]]
          });
      }
  }
  </code></pre>
  <p>This all looks fine to me but for some reason I am getting:</p>
  <blockquote>
  <p>Error: Uncaught (in promise): 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 thought I had declared this in my <code>&lt;form&gt;</code>.</p>