Angular 2+ - динамическое добавление элементов DOM в HTML FORM - PullRequest
Новая
       16

Angular 2+ - динамическое добавление элементов DOM в HTML FORM

0 голосов
/ 18 сентября 2018

Я пытаюсь создать страницу, которую пользователи могут использовать для создания пользовательских форм.Я буду давать пользователю выпадающее меню.Из этого выпадающего меню пользователь сможет выбрать тип вопроса - например, текстовое поле, переключатель, флажок, дату и т. Д. - и затем на основе этого выбора я хочу добавить этот тип ввода в свойФорма DOM.После отправки я хочу сохранить значение этих вопросов в формате JSON.

Есть предложения?Каков наилучший подход для решения этой проблемы или как я могу это реализовать?

Ответы [ 3 ]

0 голосов
/ 18 сентября 2018

РЕДАКТИРОВАТЬ: я чувствую, как пример, как в этом стеке, показывает, насколько вы управляете с точки зрения динамических форм с помощью базовых утилит Angular.

https://stackblitz.com/edit/deep-nested-reactive-form?file=app%2Fapp.component.html

Реактивные формы - ваш ответ. Не существует идеального способа сделать то, что вы хотите. Но я выбрал конкретный пример из старого проекта. Итак, в одном пункте я проверяю тип компараторов, которые у меня есть, благодаря моему первому выбору. После этого я проверяю, нужно ли мне поле, которое требует простого поля ввода или выбора даты. Есть так много способов сделать это. 

<div class="col-7">
    <!-- Text Input Field for most cases that don't involve time comparisons -->
    <div *ngIf="!doesRequireDateInput(i) && checkIfComparatorOptionIsEmptyOrNull(i)">
        <div class="string-input-field" formArrayName="values">
            <div [formGroupName]="j" *ngFor="let val of getValues(condition); let j = index">

                <div class="input-group">
                    <input formControlName="value" type="text" class="form-control py-0" placeholder="Search for...">
                </div>
            </div>
        </div>
    </div>

    <!-- Date Input Field -->
    <div *ngIf="doesRequireDateInput(i) && checkIfComparatorOptionIsEmptyOrNull(i)">
        <div class="string-input-field row" formArrayName="values">
            <div [formGroupName]="j" *ngFor="let val of getValues(condition); let j = index">

                <div *ngIf="j === 0" class="input-group mb-3">
                    <input type="text" formControlName="value" name="dateFrom" class="form-control py-0" style="text-align: center" [owlDateTimeTrigger]="dt3"
                     [owlDateTime]="dt3">
                    <owl-date-time [pickerType]="'calendar'" #dt3></owl-date-time>


                    <div class="input-group-append">
                        <span class="input-group-text" style="border-bottom-right-radius: 0px; border-top-right-radius: 0px" id="date-for-input">
                            <i class="fa fa-calendar" aria-hidden="true"></i>
                        </span>
                    </div>
                </div>

                <div *ngIf="j === 1" class="input-group mb-3">
                    <input type="text" formControlName="value" name="dateFrom" class="form-control py-0" style="text-align: center" [owlDateTimeTrigger]="dt3"
                     [owlDateTime]="dt3">
                    <owl-date-time [pickerType]="'calendar'" #dt3></owl-date-time>
                </div>
            </div>
        </div>
    </div>
</div>
0 голосов
/ 18 сентября 2018

Вам не нужен пакет, лучший способ сделать это так: 

<div ngbDropdown class="nav-item dropdown cursor">
    <a class="nav-link" ngbDropdownToggle>
        DropDown
    </a>
    <div ngbDropdownMenu class="dropdown-menu">
        <a class="dropdown-item" (click)="option1 = !option1">
            Form 1
        </a>
        <a class="dropdown-item" (click)="option2 = !option2">
            Form 2
        </a>
    </div>
</div>

<form #form="ngForm">
    <div class="form-option1" *ngIf="option1Selected">
        <!-- YOUR FORM 1 -->
    </div>
    <div class="form-option2" *ngIf="option2Selected">
        <!-- YOUR FORM 2 -->
    </div>
    ...

    <button type="submit"></button>
</form>

И их в вашем компоненте: 

option1 = "false";
option2 = "false";

Документ *ngIf здесь здесь

0 голосов
/ 18 сентября 2018

Посмотрите на ng-dynamic-forms .Я использовал его в проекте раньше, и это действительно помогло создать формы динамически .

. Он даже обеспечивает импорт / экспорт функциональность, которую вы можете использовать для храненияФорма / вопросы, включая предоставленные ответы в формате JSON.

sidenote: Я никоим образом не связан с упомянутым проектом.

...