Как создать Angular FORM в отношении JSON, который по своей природе динамичен?

Question

Предположим, сегодня у меня есть JSON с 2 полями -

1.name

2.age

Через месяц к этому JSON добавлено новое поле, предположим, DOB. Через 2 месяца было добавлено еще одно поле - address самого типа объект .

JSON сейчас

1.name

2.age

3.DOB

4.адрес -

          4.1. PO
          4.2. City
          4.3. State

Сценарий здесь таков: JSON меняется каждый день, и в будущем он также может измениться. Теперь иметь пользовательский интерфейс, созданный вручную (то есть каждый раз добавлять новые поля ввода), - боль.

Пожалуйста, скажите мне какой-нибудь подход или предоставьте решение для этого, где мой пользовательский интерфейс будет меняться в зависимости от данного JSON.

Answer 1

Для начала, раздел формы в официальных документах Angular делает хорошее и интересное чтение. Поскольку вы должны поддерживать большие и несколько сложные формы, я бы определенно рассмотрел реактивные формы . Они отличаются от шаблонно-управляемых форм, так как они управляются моделями. Любое изменение, внесенное в модель данных, будет отражаться в форме с использованием возможностей наблюдаемых (потоков).

Когда мы углубимся в этот вопрос, мы обнаружим, что существует третье понятие, называемое динамическими формами :

Создание форм ручной работы может быть дорогостоящим и занимать много времени, особенно если вам нужно их большое количество, они похожи друг на друга и часто меняются в соответствии с быстро меняющимися требованиями бизнеса и нормативными требованиями.

Динамические формы в Angular - это в основном реактивные (управляемые моделями) формы, которые создаются динамически. Ключ - это динамическая привязка метаданных к данным, используемая для визуализации формы без каких-либо жестких предположений о конкретных полях. Эту концепцию довольно сложно освоить, но она определенно стоит в долгосрочной перспективе. Мой совет - начать с учебника по Angular, чтобы вы хотя бы знали , как и , почему это работает.

Возвращаясь к вашему вопросу; Есть библиотеки, которые сделали большую часть тяжелой работы для вас. Возможно, вы захотите взглянуть на Formly . Formly позволяет создавать формы на основе JSON, используя возможности динамических форм. Создать поле формы очень просто:

{
    key: 'email',
    type: 'input',
    templateOptions: {
        type: 'email',
        label: 'Email address',
        placeholder: 'Enter email',
        required: true,
    }
}

Чтобы продвинуться дальше, я создал конструктор форм , который можно использовать для создания форм-совместимых форматов JSON с помощью методов цепочки. Это позволяет выполнять чистый код и печатать на машинке, что делает невозможным создание неправильных формальных конфигураций полей. Мы можем создать то же поле, что и выше, используя построитель форм:

builder
  .input('email', 'text')
  .label('Email address')
  .placeholder('Enter email')
  .required();

Вы можете играть с конструктором форм на StackBlitz .

Удачи!