ngx-formly textarea matTextareaAutosize - PullRequest
Новая
       3

ngx-formly textarea matTextareaAutosize

0 голосов
/ 09 мая 2018

Я пытаюсь выяснить, как заставить textarea автоматически изменять размер, используя matTextareaAutosize в ngx-formly. Это работает, если я добавлю его в HTML, как показано ниже 

<textarea matInput matTextareaAutosize></textarea>

Я попытался добавить в поле объект, а также templateOptions 

    {
      key: 'something',
      type: 'textarea',
      templateOptions: {
        label: 'Something'
      },
      matTextareaAutosize: true,
    }

    or

    {
      key: 'something',
      type: 'textarea',
      templateOptions: {
        label: 'Something',
        matTextareaAutosize: true
      }
    }

1 Ответ

0 голосов
/ 08 августа 2018

На момент написания этого поста свойство matTextareaAutosize не встроено.

Создать собственный шаблон очень просто. Компонент выглядит так: 

import { Component, OnInit, ViewChild } from '@angular/core';
import { FieldType } from '@ngx-formly/material';
import { MatInput } from '@angular/material';

@Component({
  template: `
    <textarea matInput
              [id]="id"
              [formControl]="formControl"
              [errorStateMatcher]="errorStateMatcher"
              [cols]="to.cols"
              [rows]="to.rows"
              [placeholder]="to.placeholder"
              [formlyAttributes]="field"
              [matTextareaAutosize]="true"
    >
    </textarea>
  `
})

export class TextareaAutoResizeComponent extends FieldType implements OnInit {
  @ViewChild(MatInput) formFieldControl: MatInput;
  ngOnInit() {
  }
}

Затем определите const для конфигурации типа: 

export const textAreaAutoResizeType = {
  name: 'textarea-auto-resize',
  component: TextareaAutoResizeComponent,
  wrappers: ['form-field']
};

Наконец, зарегистрируйте тип в модуле: 

imports: [
    FormlyModule.forRoot({
      types: [textAreaAutoResizeType]
    })
  ],

Используйте это следующим образом: 

{
    key: 'note',
    type: 'textarea-auto-resize',
    templateOptions: {
       label: 'Note'
    }
},
...