Angular textarea data binding

Question

I am able to bind the data from a textarea on to the page whilst typing but how am I able to get the returns placed in the textarea?

My current code is:-

app.component.html

  <div class="ui center aligned grid">{{Form.value.address}}</div>

  <form class="ui large form" [formGroup]="Form">
    <div class="ui segment">
      <div class="field">
        <div class="ui input">
          <textarea type="text" name="address" placeholder="Address" formControlName="address"></textarea>
        </div>
      </div>
    </div>
  </form>

app.component.ts

import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormControl, FormGroup} from '@angular/forms';

@Component({
  selector: 'app',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {

  private Form: FormGroup;

  constructor() { }

  ngOnInit() {
    this.Form = new FormGroup({
      address: new FormControl()
    });
  }

}

As you can see from above I can get the data to bind but I am unable bind it as multiple lines, I know I could have multiple boxes to achieve this but I was hoping I would not have to do that.

Any help would be greatly appreciated.

Answer 1

textarea sends line breaks as '\n' and html shows line breaks with <br/>.

So, you need to convert newline characters from the textarea to <br&gt. Hope this helps.