Ionic 3 ion-textarea line break issue

Question

I am using ionic 3, and i discovered that when I using ion-textarea, and have breakline in it, and then submit, it will not have preserve the breakline automatically.

my code:

<ion-textarea #replyinput [(ngModel)]="commentData.comment" maxlength="200" name="comment" style="min-height:100px;" type="text" formControlName="comment" placeholder="{{ 'Comment.replyPlaceholder' | translate }}"></ion-textarea>

And I have input:

Hello

everyone

it shows: Hello everyone

Anyone know how to solve? thanks a lot

Answer 1

I spent few hours to work on this lol.

The problem is on post uri (parameter) that not bring line break to your API, so we should encode the URI to html special characters before post it.

Read here: https://www.w3schools.com/jsref/jsref_encodeuri.asp

Here is my textarea on html file:

<ion-textarea no-margin rows="2" [(ngModel)]="userPost.text"></ion-textarea>

and this is my .ts file:

var text = encodeURI(this.userPost.text);

For output just give like common string use.

Notes: add white-space:pre-warp css based on this answer: https://stackoverflow.com/a/30593806/5769517

<p style="white-space: pre-wrap;">{{text}}</p>

Will get this result:

Text Area
will try this is line 1
this is line 2
this is line 3

Processed / Encoded result
will%20try%20this%20line%201%0Athis%20is%20line%202%0Athis%20is%20line%203

Output
will try this is line 1
this is line 2
this is line 3