Angular Forms with a textarea

Question

I'm using angular forms in a dialog to collect strings. In the example below they are a contact and a reason. Everything works as expected when I use input tags, but I cannot get the formController to bind to a textarea. I'm having no luck with documentation. Am I missing something? a known workaround?

X.component.html

  <form [formGroup]="myForm">
      <input formControlName="contact" placeholder="contact" required/>
      <textarea placeholder="reason" formControllerName="reason" required></textarea>
  </form>

X.component.ts

import { Component } from "@angular/core";
import { FormBuilder, FormGroup, Validators} from "@angular/forms";

@Component({
  selector: 'X',
  templateUrl: 'X.component.html',
  styleUrls: ['./X.component.scss']
})
export class XDialog{
  myForm: FormGroup;

  constructor(
      private fb: FormBuilder
  ){
    this.myForm = this.fb.group({
      contact: ['', Validators.required],
      reason: ['', Validators.required],
    });
}

Answer 1

Just like an input a textarea makes use of the property formControlName instead of formControllerName.

<textarea placeholder="reason" formControlName="reason" required></textarea>

Here's a working example: https://stackblitz.com/edit/angular-stackoverflow-57597986