CODEWITHSUNDEEP
angularangular-material2
Ashish
Ashish

Reputation: 14707

Multiline text area in angular material 2

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.

Upvotes: 12

Views: 32116

Answers (3)

Simon_Weaver
Simon_Weaver

Reputation: 145950

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.)

Upvotes: 2

mkb
mkb

Reputation: 1155

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>

Upvotes: 5

Edric
Edric

Reputation: 26740

  • 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?

Upvotes: 10

Related Questions