1

我想在我的 Formly 表单中包含一个简单的链接，例如

<a href="https://google.com">Search</a>

但是我找不到如何扩展ahtml 元素

我的自定义 Formly 组件是

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

@Component({
 selector: 'formly-link-component',
 template: `
 <a [href]="to.url">{{ to.title }}</a>
 `,
})
export class FormlyLinkComponent extends FieldType {

}

我已将自定义组件添加为 app.module.ts 中的类型

 { name: "link", component: FormlyLinkComponent },

而表单配置 JSON 是

{
  "schema": {
    "title": "A registration form",
    "description": "A simple form example.",
    "type": "object",
    "required": [
      "firstName",
      "lastName"
    ],
    "properties": {
      "webLink": {
        "type": "link",
        "url": "https:\/\/en.wikipedia.org\/wiki\/Chuck_Norris",
        "title": "Click Me"
      },
      "firstName": {
        "type": "string",
        "title": "First name",
        "default": "Chuck"
      },
      "lastName": {
        "type": "string",
        "title": "Last name"
      },
      "age": {
        "type": "string",
        "title": "Age"
      },
      "bio": {
        "type": "string",
        "title": "Bio"
      },
      "password": {
        "type": "string",
        "title": "Password",
        "minLength": 3
      },
      "telephone": {
        "type": "string",
        "title": "Telephone",
        "minLength": 10
      }
    }
  },
  "model": {
    "lastName": "Norris",
    "age": 75,
    "bio": "Roundhouse kicking asses since 1940",
    "password": "noneed"
  }
}

Stackblitz 在这里 https://stackblitz.com/edit/ngx-formly-ui-material-fv4a2x?file=src/assets/simple.json

4

1 回答 1

0

将 alink.type.ts 文件中的代码更改为：

@Component({
  selector: "formly-link-component",
  template: `
    <a href="http://www.google.com" target="_blank">Something</a>
  `
})

这确实显示在 UI 上。所以你可能会错过组件的一些输入参数？你可以试试这个。我希望它有所帮助。谢谢你。

PS "Something" 和 google.com 是用于测试的占位符。

于 2021-02-17T03:39:36.227 回答