title: Angular 7 FormControlName gives console error
body: <p>I have a reactive form on my webpage, but it gives an error that looks like this:</p>
  
  <blockquote>
    <p>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).</p>
  </blockquote>
  
  <p>I don't understand why i am getting this error because i have a formGroup instance.</p>
  
  <p>This is my HTML:</p>
  
  <pre><code>&lt;form [formGroup]="singleRecipientForm"&gt;
      &lt;textarea #textInput placeholder="user e-mail" formControlName="email"&gt;&lt;/textarea&gt;
      &lt;button type="submit" (click)="sendMailTextInput(textInput.value)"&gt;Send invite &lt;/button&gt;
  &lt;/form
  </code></pre>
  
  <p>And my typescript looks like this:</p>
  
  <pre><code>singleRecipientForm: FormGroup;
  
  constructor(private formBuilder: FormBuilder) {}
  
  ngOnInit() {
      this.singleRecipientForm = this.formBuilder.group({
        email: ['', [Validators.required]],
      });
  }
  </code></pre>
  
  <p>I have no clue to why this error is appearing.</p>