0

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.

Rohan Fating
  • 2,135
  • 15
  • 24
Tony Hensler
  • 1,482
  • 5
  • 15
  • 30
  • What do you mean *"bind it as multiple lines"*? Do you see newlines `\n` in the resulting strings? If you want to get an array with a string for each line you'll have to split it; see e.g. https://github.com/textbook/salary-stats/blob/cb987aaeb7b74cf23f2eb204ce79658040f63883/src/app/bulk-upload/bulk-upload.component.ts#L45 where I've done just that with a `textarea` and a reactive form. – jonrsharpe Sep 09 '17 at 11:00
  • I will have a look at the link you have provided, I was wondering if there was an out of the box solution. please see https://ibb.co/endZUF as you can see on the image I have a textarea binding data to a div but when I hit return the data binded on the lefthand side all stays on one line. – Tony Hensler Sep 09 '17 at 11:07

1 Answers1

0

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.

GKK
  • 108
  • 5