微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Formly - 如何将字段链接到自定义模板的模型

如何解决Formly - 如何将字段链接到自定义模板的模型

我正在使用 Angular 8 和 Formly 来创建带有搜索的选择输入类型。作为解决方案,我发现 ng-select 很适合我。

问题是如何将 [model] 指令链接到使用我的自定义模板的 Formly 字段?

注意:我不想使用纯文本,比如 model.my.special.key - 我需要给它一些通用的东西。通过这种方式,我可以将它与我想在搜索中使用此选择器的其他字段一起使用。

更详细地说明我到目前为止所做的:

  1. 我创建了一个扩展 @Component 的新 FieldType 并有一个模板,该模板使用选择器来显示它作为输入接收的选项

@Component({
  selector: "SelectorWithSearchModule",template: `
    <ng-select
      [items]="to.options"
      bindLabel="label"
      bindValue="code"
      labelForId="code"
      placeholder="{{ to.label }}"
      [multiple]="to.multiple"
      clearallText="Clear"
      (change)="onChange($event)"
      [(ngModel)]="what-to-put-in-here?"
    >
    </ng-select>
  `
})
export class SirutaModule extends FieldType implements OnInit {}

  1. 我在 app.module.ts 中声明了这个新组件并用它扩展了 Formly 类型: 例如:

import { SelectorWithSearchModule } from "./types/selector/special-selector.component"; // declaration
...
FormlyModule.forRoot({ // from here begins the Formly deFinition
types: [
{
  name: "special-selector",component: SelectorWithSearchModule 
}
]

  1. 我在定义新 Formly 字段时使用了 special-selector 名称

{
  className: "col-8",type: "special-selector",key: "my.hierarchy.key",templateOptions: {
    label: "some label here",options: ["option_one","option_two"]
  }
}

我最终希望键 my.hierarchy.key 包含在我的自定义模板中选择的值 user,但具体如何操作不是很清楚。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。