ngx-formly中Material组件prefix/suffix使用注意事项

在使用ngx-formly与Angular Material集成时，开发者可能会遇到一个常见问题：当尝试为表单字段添加prefix或suffix时，控制台会抛出templateRef.createEmbeddedViewImpl is not a function错误。这个问题源于对Material设计理念的理解不足，本文将深入分析原因并提供解决方案。

问题根源分析

Angular Material的表单字段组件(mat-form-field)提供了prefix和suffix功能，允许开发者在输入框前后添加额外内容。然而，Material设计上要求这些前后缀必须是模板引用(TemplateRef)实例，而不是简单的字符串或普通属性。

当开发者直接像下面这样配置时：

{
  key: 'example',
  props: {
    prefix: 'mail'
  }
}

实际上传入的是一个字符串值，而Material期望的是一个模板引用，因此会抛出上述错误。

解决方案

方案一：使用自定义包装器

最规范的解决方案是创建一个自定义包装器，正确处理prefix/suffix的模板引用。这种方法虽然需要额外代码，但提供了最大的灵活性和可维护性。

1. 创建自定义包装器组件：

@Component({
  selector: 'formly-wrapper-mat-form-field',
  template: `
    <mat-form-field>
      <ng-container *ngIf="props.prefix">
        <ng-template matPrefix>
          {{ props.prefix }}
        </ng-template>
      </ng-container>
      
      <ng-container #fieldComponent></ng-container>
      
      <ng-container *ngIf="props.suffix">
        <ng-template matSuffix>
          {{ props.suffix }}
        </ng-template>
      </ng-container>
    </mat-form-field>
  `,
})
export class FormlyMatFormFieldWrapper extends FieldWrapper {}

2. 在表单配置中使用：

{
  key: 'email',
  wrappers: ['mat-form-field'],
  props: {
    prefix: '@'
  }
}

方案二：直接使用模板引用

如果不希望创建自定义包装器，也可以在字段配置中直接提供模板引用：

@Component({
  template: `
    <form [formGroup]="form">
      <formly-form [model]="model" [fields]="fields" [form]="form">
        <ng-template #prefixTemplate>
          <mat-icon>mail</mat-icon>
        </ng-template>
      </formly-form>
    </form>
  `
})
export class AppComponent {
  @ViewChild('prefixTemplate') prefixTemplate: TemplateRef<any>;
  
  fields: FormlyFieldConfig[] = [
    {
      key: 'email',
      type: 'input',
      props: {
        prefix: this.prefixTemplate
      }
    }
  ];
}

最佳实践建议

1. 一致性：在大型项目中，建议采用自定义包装器方案，保持代码风格统一
2. 复杂内容：当prefix/suffix需要包含复杂内容(如图标、按钮等)时，模板引用方式更为合适
3. 性能考虑：对于简单文本前缀，自定义包装器性能更优，避免了不必要的模板创建

总结

理解Material组件对prefix/suffix的设计要求是解决这个问题的关键。通过本文介绍的两种方案，开发者可以根据项目需求选择最适合的实现方式。对于长期维护的项目，建议采用自定义包装器方案，它提供了更好的可扩展性和维护性。