Изменить размер текстовой области

В настоящее время у меня есть textarea как это:

<textarea matInput rows="5" cols="40" placeholder="text"></textarea>

Тем не менее, это всегда один и тот же размер.

Любая идея о том, как изменить размер textarea?

Ответ 1

Вот пример:

<mat-form-field>
  <mat-label>Description</mat-label>
  <textarea matInput formControlName="description" matTextareaAutosize matAutosizeMinRows=1 matAutosizeMaxRows=5></textarea>
</mat-form-field>

Ссылка: https://material.angular.io/components/input/api

Ответ 2

В зависимости от того, что вы имели в виду:

Однако это всегда один и тот же размер.

Есть два варианта.

ВАРИАНТ 1 (СТАТИЧЕСКИЙ размер в зависимости от `rows`\`cols`):

В настоящее время только rows влияет на высоту материала textarea, cols не меняет его ширину.

Поэтому для увеличения ширины мы должны использовать свойство CSS width для mat-form-field, содержащее наш textarea:

<mat-form-field style="width: 300px;">
    <textarea matInput rows="5" cols="40" placeholder="text"></textarea>
</mat-form-field>

ВАРИАНТ 2 (ДИНАМИЧНЫЙ размер для содержания `textarea`):

В материале 6 была добавлена директива CdkTextareaAutosize.

Из официальных документов:

Директива cdkTextareaAutosize может применяться к любому <textarea> сделать его автоматически изменить размер в соответствии с его содержанием. Минимум и Максимальное количество строк для расширения может быть установлено с помощью Свойства cdkAutosizeMinRows и cdkAutosizeMaxRows соответственно.

И вот упрощенный пример оттуда:

<mat-form-field>
    <mat-label>Autosize textarea</mat-label>
    <textarea
        matInput
        cdkTextareaAutosize
        cdkAutosizeMinRows="1"
        cdkAutosizeMaxRows="5">
    </textarea>
</mat-form-field>

Примечание:
matTextareaAutosize, упомянутый в других ответах, устарел и будет удален в следующем основном выпуске. официальные документы уже используют cdkTextareaAutosize.

Ответ 3

Угловые материалы 7.2:
https://material.angular.io/components/input/examples

<mat-form-field>
  <mat-label>Autosize textarea</mat-label>
  <textarea matInput cdkTextareaAutosize
            cdkAutosizeMinRows="2"
            cdkAutosizeMaxRows="5"></textarea>
</mat-form-field>

Обратите внимание на cdkTextareaAutosize, cdkAutosizeMinRows, cdkAutosizeMaxRows

Ответ 4

См. Пример. Важно добавить css в форму, чтобы указать ширину:

.example-form {
    min-width: 150px;
    max-width: 500px;
    width: 100%;
  }

а также css в текстовое поле:

.example-full-width {
  width: 100%;
}

Если вы не добавите css в форму, значок разворачивается в неправильной позиции.

Ответ 5

Вы можете попытаться настроить высоту своей тексарии, применив matTextareaAutosize и присвоив значения свойствам matAutosizeMinRows и matAutosizeMaxRows.

Дополнительную информацию см. на странице https://material.angular.io/components/input/api.

Ответ 6

Угловая 7.3.7:

<textarea [matTextareaAutosize] matInput placeholder="Leave a comment"></textarea>