Multiline text area in angular material 2

Question

How do I wrap text and have support for multiple line, using angular material 2 and angular.

<md-input-container fxFlex="18" fxFlexOffset="1">
      <textarea [(ngModel)]="Comments" name="Comments" mdInput placeholder="Comments" ></textarea>
        <md-error>This field is required</md-error>
    </md-input-container>

Wrapping text mean, text should be appear multi line if content is longer than width.

Solution 1

• Doesn't textarea elements have multi-line support? Did you mean setting the rows for the textarea? Just use the native rows attribute and set it to the value (as a number) of your choice.

  <md-input-container fxFlex="18" fxFlexOffset="1">
    <textarea [(ngModel)]="Comments" name="Comments" mdInput placeholder="Comments" rows="3"></textarea>
      <md-error>This field is required</md-error>
  </md-input-container>
  

• As for wrapping the text, I don't really understand what you mean. Could you please elaborate on that?

Solution 2

Not the exact answer for the question but since this is the best match in google search, to set rows for a textarea in angular apperantly we need to usecdkTextareaAutosize, cdkAutosizeMinRowsattributes .

    <mat-form-field>
      <textarea matInput placeholder="Your Message" formControlName="message" cdkTextareaAutosize
        cdkAutosizeMinRows="6"></textarea>
    </mat-form-field>

Solution 3

Important Tip:

If converting an existing <input/> control to a <textarea> don't forget to add </textarea> to close it - otherwise the Angular compiler will give you some very misleading errors!

(You don't need to do the same for input as it's a self closing tag.)

Comments

[Ashish]

ok I added rows but then the problem is it does not shows the begning line

[mghaoui]

This is the correct answer. Can SO please stop downvoting anwers!??