Angular Formly：如何添加引导输入组插件按钮？还是引导插件下拉菜单？答案

【问题标题】：Angular Formly: how do I add a bootstrap input group addon button? Or bootstrap addon dropdown?Angular Formly：如何添加引导输入组插件按钮？还是引导插件下拉菜单？
【发布时间】：2016-05-07 04:06:51
【问题描述】：

我对 Angular.js 和 Angular-Formly 都有些陌生，所以请保持温和。我正在尝试创建一个输入，允许用户输入一个值作为百分比或美元金额。所以我希望他们能够使用输入组插件按钮在 % 和 $ 之间切换或切换。

类似这样的：

这样他们就可以点击$ ⇆ % 按钮在输入美元金额或百分比之间切换。

另一个（从 UI 角度来看可能是更好的选择）是有一个引导下拉菜单，但我也找不到如何使用 Formly 完成此操作的示例。

类似这样的：

在任何一种情况下，输入字段中的金额都应显示正确的输入类型（$ 或 %）。因此，如果用户切换到百分比，金额将变为如下所示：

Angular Formly 代码：用于生成上面的第一个示例。

{
  "className": 'col-sm-6 col-md-4',
  "hideExpression": () => !self.isBehalfType.call(self, LANDLORD),
  "type": 'currency',
  "key": "Search_Yearly_Square_Foot_Rate_Increase__c",
  "templateOptions": {
    "label": 'Projected Rental Increase',
    "maxlength": 8,
    "type": "text",
    "onChange": () => self.updateProforma(),
    "addonLeft": {
      "text":"$ ⇆ %",
    },
    "addonRight": {
      "text": "ft²/yr"
    }
  },
  "ngModelElAttrs": {
    'select-on-click': '',
    "maxlength": "8"
  },
  "defaultValue": self.editedTransaction.Search_Yearly_Square_Foot_Rate_Increase__c || 0
},

任何指导（包括我没有想到的任何更好的方法）将不胜感激。谢谢！

【问题讨论】：

您能设置一个 plunkr 吗？这将帮助您准确回答问题

标签： angular-formly

【解决方案1】：

你应该创建一个新的formly custom template

在您设置 angular-formly 配置的位置（可能在 index.config.js 文件中），您会看到使用了 formlyConfigProvider.setType({}) 函数。该函数定义您的自定义模板。

另外，不要考虑通过模板实例配置（您在上面发布的“Angular Formly Code”块）更改 html。如果您需要不同的 html，请制作一个新模板。

【讨论】：