角度形状按钮自定义类型

angular formly button custom type

本文关键字：自定义 类型 按钮      更新时间：2023-09-26

我是刚接触角度形式。我想为按钮创建自定义模板。下面给出的代码截图供参考。

<script type="text/ng-template" id="button.html">
    <md-button class={{to.class}} ng-click={{to.method}}>{{to.label}}</md-button>
</script>

问题是在处理 ng-click 指令时给我一个错误，因为指令{{to.method}}尚未评估。

做这样的事情就不行吗？没有一个角度形式示例将按钮作为模板，以形式方式执行此操作在概念上是错误的吗？

编辑：

以下是相应的自定义模板和 JSON：

我已经为按钮创建了一个自定义模板：

<script type="text/ng-template" id="button.html">
    <md-button class={{to.class}} ng-click="{{to.method}}">{{to.label}}</md-button>
</script>

对应的 JSON 为： 

{
type: 'button',
templateOptions: {
   label: 'Create Item',
   class: 'md-raised md-primary',
   method: 'createItem'
}

确切的错误如下：

错误： [$parse：语法] 语法错误： 从 [{to.method}

}] 开始的表达式 [{{to.method}}] 第 2 列处的标记"{"键无效。

我遇到了类似的问题，这是我为解决它所做的。为可能有相同问题的其他人发帖，因为有关按钮的文档似乎很少。

注意：角度属性不需要大括号

设置类型：

formlyConfig.setType({
  name: 'button',
  template: '<button class="{{to.class}}" ng-click="to.method()">{{to.label}}</button>'
});

然后，将其添加到表单中的位置：

{
  key: 'myBtn',
  type: 'button',
  templateOptions: {
    class: 'btn-primary',
    label: 'My Test Button',
    method: function() {
     alert('test');
     console.log('test');
    }
  }
}

干杯！

相关文章：