Question

我刚刚开始研究角度模式形式，所以这可能是我在文档或描述中遗漏的内容。

我要做的是在生成的表单字段的标签旁边添加一个图标，并在字段本身旁边添加一个图标。像这样：

但开箱即用的angular-schema-form将生成：

我知道我可以创建自己的自定义字段类型，但这是要走的路吗？这需要我重新定义自定义变体中的所有字段类型，因为我需要在所有表单字段中使用这两个图标及其功能。

我希望有一种更简单的方法可以将此功能添加到生成的html中，并且可以轻松地在其上添加功能（ng-click功能）。

编辑：再次阅读完文档后，我发现我需要定义自己的自定义字段类型（https://github.com/Textalk/angular-schema-form/blob/development/docs/extending.md）

从我收集的内容中，我需要将以下内容添加到我的模块配置块：

schemaFormDecoratorsProvider.addMapping(
    'bootstrapDecorator',
    'custominput',
    'shared/templates/customInput.tpl.html',
    sfBuilderProvider.builders.sfField
);

我还将shared/templates/customInput.tpl.html的内容添加到$templatesCache。

但是当我尝试使用类似

的模式渲染表单时

"schema": {
    "type": "object",
    "properties": {
        "firstName": {
            "title": "First name",
            "type": "string"
        },
        "lastName": {
            "title": "Last name",
            "type": "custominput"
        },
        "age": {
            "title": "Age",
            "type": "number"
        }
    }
}

我只看到第一个字段（firstName）和年龄。自定义类型只是被忽略。

我试图调试问题的方法，但据我所知，自定义字段已正确添加到装饰器中。我试过在schemaFormDecoratorsProvider.decorator()上安装console.log，在那里我可以看到自定义字段类型。

我还尝试在控制器中启动$scope.$broadcast('schemaFormRedraw')，但我仍然只看到内置字段类型。

作为测试，我试图定义自己的装饰器，覆盖默认的Bootstrap装饰器：

schemaFormDecoratorsProvider.defineDecorator('bootstrapDecorator', {           
    'customType': {template: 'shared/templates/customInput.tpl.html', builder: sfBuilderProvider.stdBuilders},
    // The default is special, if the builder can't find a match it uses the default template.
    'default': {template: 'shared/templates/customInput.tpl.html', builder: sfBuilderProvider.stdBuilders},
}, []);

我希望看到所有字段都呈现相同，因为我只定义了默认类型和我自己的自定义类型。但是，我只看到渲染的内置类型，我的custominput直到被忽略。

我错过了什么？

Answer 1

我遇到了同样的问题，问题是您不应该将JSON架构与表单定义混淆。

要渲染自定义组件，您必须更改表单定义。即在您的控制器中，您的标准形式定义可能类似于：

    function myCallbackFunction(data){
            Observatory.state.third_party.tlsobservatory.scan_id = data.scan_id;

            if (this.initiateScanOnly) { return; }

            loadTLSObservatoryResults();  // retrieve the results

    }



     // make a POST to initiate the scan
    $.ajax({
        data: {
            rescan: rescan,
            target: Observatory.hostname
        },
        initiateScanOnly: initiateScanOnly,
        dataType: 'jsonp',

        method: 'POST',
        error: function() { errorResults('Scanner unavailable', 'tlsobservatory') },
        jsonpCallback: 'myCallbackFunction'
        url: SCAN_URL
    });

您必须将此更改为：

$scope.form = [
    "*",
    {
      type: "submit",
      title: "Save"
    }
  ];

angular-schema-form：将自定义html添加到表单字段

1 个答案: