Question

我试图弄清楚如何使用ngx-formly中的matTextareaAutosize让textarea自动调整大小。如果我将它添加到HTML中，它可以工作

<textarea matInput matTextareaAutosize></textarea>

我尝试添加到field对象以及templateOptions

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

    or

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

Answer 1

目前，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'
    }
},

ngx-formly textarea matTextareaAutosize

1 个答案: