Topic: Preserve line breaks in textarea

steveweller pro asked 5 years ago


Hi, I want to have a textarea as an input (like the contact form examples). but preserve any line breaks the user has entered. My form control is defined like this: <textarea type="text" data-error="Please enter a value" data-success=" " id="form-contact-message" [formControl]="messageForm" class="form-control md-textarea" mdbInputDirective rows="3"></textarea> Can you point me in the right direction? Thanks, Steve

Damian Gemza staff commented 5 years ago

Dear Steve, What do you mean by "preserve any line breaks the user has entered." ? Do you want to send the text from the textarea field with every line break which user has entered? Best Regards, Damian

steveweller pro commented 5 years ago

Hi Damien, Yes, that's exact;y right. If the user enters: A B C D I want to preserve those linebreaks when I get the text. At the moment I either get 'A B C D' or worse 'ABCD'. Thanks, Steve

Damian Gemza staff answered 5 years ago


Dear Steve, Did you try to achieve this in this way? .ts:
import { Component, ViewChild, OnInit, ElementRef } from '@angular/core';

@Component({

selector:'app-root',

templateUrl:'./app.component.html',

styleUrls: ['./app.component.scss'],

})

export class AppComponent implements OnInit {

@ViewChild('textarea') textarea: ElementRef;

send() {

let value=this.textarea.nativeElement.value;

console.log(value);

}

}
.html:
<!--Basic textarea-->

<div class="md-form">

<textarea #textarea type="text"id="form7"class="md-textarea form-control"mdbInputDirective></textarea>

<labelfor="form7">Basic textarea</label>

</div>

<button mdbBtn color="primary" (click)="send()">Button</button>
For me, everything is working fine. Best Regards, Damian

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.3
  • Device: Laptop
  • Browser: Chrome
  • OS: WIndows 10
  • Provided sample code: No
  • Provided link: No