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

Question

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

像这样：

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

另一个（从 UI 的角度来看可能是更好的选择）是有一个 bootstrap 下拉菜单，但我也没能找到一个例子来说明如何使用 Formly 来完成它.

像这样：

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

Angular 形式代码： 用于生成上面的第一个例子。

{
  "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({}) 函数。该函数定义您的自定义模板。

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

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

Angular Formly: how do I add a bootstrap input group addon button? Or bootstrap addon dropdown?

angular-formly