Генерация динамического HTML в Angular 7 - PullRequest
Новая
       37

Генерация динамического HTML в Angular 7

0 голосов
/ 07 мая 2019

Я Angular 1.5 эксперт-разработчик, в нашем новом проекте мы используем Angular 7 для построения динамической сложной формы, она может иметь несколько полей:

  1. Ввод
  2. Кнопка
  3. Пользовательские компоненты
  4. Выпадающий
  5. Подсвеченный элемент

Кроме того, может иметься зависимости между полями, это означает, что естьнеобходимо использовать *ngIf в некоторых ситуациях для определенного поля.Теперь я собираюсь загрузить How the form should looks из внешнего файла JSON, как в следующем примере: 

 {
  'type': 'Dropdown',
  'label': 'Service',
  'model': {
    'defaultValue': 'TEST1',
    'name': 'SERVICE',
    'dropDownModel': {
      'staticValues': [{
        'label': 'Test 1',
        'value': 'TEST1'
      }, {
        'label': 'Test 2',
        'value': 'TEST2'
      }, {
        'label': 'Test 3',
        'value': 'TEST3'
      }]
    }
  }

Затем я перехожу по JSON и генерирую динамический HTML, как описанона JSON.Обратите внимание, что в model есть свойство name, которое должно быть подключено к ngModel, и его следует добавить к viewModel компонента.

После проверки статей, связанных сЯ обнаружил, что некоторые из них используют [innerHtml], но это не работает для меня, если я добавляю ngModel в сгенерированное поле.Кроме того, я попытался использовать Reactive Forms и заметил, что мне нужно написать статический код на HTML.Можете ли вы помочь для лучшей практики, как это сделать?

1 Ответ

0 голосов
/ 07 мая 2019

Это точно та же проблема, над которой я работал на прошлой неделе.

После долгих исследований я прихожу к:

https://github.com/hamzahamidi/Angular6-json-schema-form

Вы могли бы взглянуть на это.

...