为什么formly-field无法渲染自定义的Formly输入组件？

• Formly 内置 <formly-field> 组件的渲染逻辑依赖传入的 field 对象携带的完整表单上下文，包括绑定的 FormGroup 实例、字段唯一标识 key、全局 Formly 配置等核心属性，缺少这些属性会导致组件实例化失败。
• 你在 RenderTypeComponent 模板中传入的 { type: 'input' } 仅指定了组件类型，缺失上述必填上下文属性，因此自定义input组件无法正常渲染。

方案1：继承父级字段上下文 #

由于 RenderTypeComponent 继承了 FieldType，本身已经持有父级传入的完整 field 实例，可直接复用父级的上下文属性构造子字段配置，修改代码如下：

@Component({
  selector: "formly-render",
  template: `
    this should be render:
    <formly-field [field]="childField"></formly-field>
  `
})
export class RenderTypeComponent extends FieldType {
  childField = {
    // 继承父级的表单、配置等公共上下文
    ...this.field,
    type: 'input',
    // 按需指定子字段唯一key、校验规则等个性化配置
    key: `${this.field.key}_child_input`,
  }
}

如果需要渲染多个子字段，可直接使用 fieldGroup 配置实现。

方案2：手动补全必填属性 #

如果子字段独立于父级字段，也可以在模板中直接补全所有必填的上下文属性：

<formly-field 
  [field]="{ 
    type: 'input',
    key: 'child_input',
    form: field.form,
    options: field.options
  }"
></formly-field>

修改后即可正常渲染自定义的input组件。

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