如何在 Angular Formly 表单上显示超链接

如何解决如何在 Angular Formly 表单上显示超链接

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

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

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

我的自定义 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

解决方法

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

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

这确实显示在用户界面上。因此，您可能缺少组件的一些输入参数？你可以试试这个。我希望它有帮助。谢谢。

附言“Something” 和 google.com 是用于测试的占位符。