如何在ngx-formly中用matTextareaAutosize实现textarea自动调整大小？

我懂你碰到的这个坑了——直接在HTML里写<textarea matInput matTextareaAutosize></textarea>完全正常，但把matTextareaAutosize加到ngx-formly的字段配置里就失效了。这是因为ngx-formly的Material textarea组件默认不会自动识别这个指令，得用正确的方式把它绑定到textarea元素上。

下面给你两种可行的解决方案：

方案一：通过字段的directives属性注入指令 #

这是最快捷的方法，你只需要在字段配置里添加directives数组，把MatTextareaAutosize指令放进去，同时确保在你的模块中导入MatTextareaAutosizeModule。

示例代码 #

首先在组件里导入指令：

import { MatTextareaAutosize } from '@angular/material/input';

然后修改字段配置：

{
  key: 'something',
  type: 'textarea',
  templateOptions: {
    label: 'Something',
  },
  // 把MatTextareaAutosize指令添加到这里
  directives: [MatTextareaAutosize],
}

最后别忘了在你的模块中导入对应的模块：

import { MatTextareaAutosizeModule } from '@angular/material/input';

@NgModule({
  imports: [
    // ... 其他你需要的模块
    MatTextareaAutosizeModule,
  ],
})
export class YourFeatureModule { }

方案二：自定义带自动调整的Formly Textarea组件 #

如果方案一没生效，你可以自定义一个封装了matTextareaAutosize的textarea组件，替换默认的textarea类型。

步骤1：创建自定义组件 #

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

@Component({
  template: `
    <textarea
      matInput
      matTextareaAutosize
      [formControl]="formControl"
      [formlyAttributes]="field"
    ></textarea>
  `,
})
export class AutosizeTextareaComponent extends FieldType<FieldTypeConfig> { }

步骤2：在模块中注册组件 #

import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { FormlyModule } from '@ngx-formly/core';
import { FormlyMaterialModule } from '@ngx-formly/material';
import { AutosizeTextareaComponent } from './autosize-textarea.component';
import { MatTextareaAutosizeModule } from '@angular/material/input';

@NgModule({
  imports: [
    ReactiveFormsModule,
    FormlyMaterialModule,
    MatTextareaAutosizeModule,
    FormlyModule.forRoot({
      types: [
        { name: 'autosize-textarea', component: AutosizeTextareaComponent },
      ],
    }),
  ],
  declarations: [AutosizeTextareaComponent],
})
export class YourFeatureModule { }

步骤3：在字段配置中使用自定义类型 #

{
  key: 'something',
  // 使用我们自定义的类型
  type: 'autosize-textarea',
  templateOptions: {
    label: 'Something',
  },
}

为什么之前的方法不行？ #

因为matTextareaAutosize是Angular指令，不是普通的HTML属性或者ngx-formly的templateOptions配置项，所以直接把它加到字段对象或templateOptions里，ngx-formly根本不知道要把这个指令应用到textarea元素上，自然就没效果啦。

内容的提问来源于stack exchange，提问作者user818991