Угловая форма: как добавить кнопку аддонов группы ввода начальной загрузки? Или выпадающее окно бутстрапа?

Question

Я немного новичок в Angular.js и Angular-Formly, поэтому, пожалуйста, будьте осторожны. Я пытаюсь создать вход, который позволит пользователям вводить значение как процент, так и сумму в долларах. Поэтому я бы хотел, чтобы они могли переключать или переключаться между% и $ с помощью кнопки добавления группы ввода.

Что-то вроде этого:

Таким образом, они могут нажать на кнопку $ ⇆ % для переключения между вводом суммы в долларах или процент.

Другим (спорным вариантом лучше с точки зрения пользовательского интерфейса) было бы иметь раскрывающееся окно начальной загрузки, но я не смог найти пример того, как это сделать с помощью 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 
}, 

Любое руководство (включая любой лучший метод, о котором я не думал) было бы весьма благодарным. Благодаря!

Answer 1

Вы, вероятно, следует создать новый formly custom template

Где вы настроите ваш угловой конфигурации мерно, вероятно, в index.config.js файле, вы увидите функцию formlyConfigProvider.setType({}) используется. Эта функция определяет ваш настраиваемый шаблон.

Кроме того, не думайте об изменении html через конфигурацию экземпляра шаблона (блок «Угловой формальный код», который вы опубликовали выше). Если вам нужен другой html, создайте новый шаблон.