Angular Formly：如何添加引导输入组插件按钮？或者bootstrap插件下拉列表？

Question

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

这样的事情：

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

另一个（从UI角度来说可以说是更好的选择）将是一个引导下拉列表，但我无法找到如何使用Formly完成该任务的示例。

这样的事情：

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

Angular Formly Code：用于制作上面的第一个例子。

{
  "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
},

我们将非常感谢任何指导（包括我没有想到的任何更好的方法）。谢谢！

Answer 1

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

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

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