Angular 7 добавляет новые поля в форму

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

public showMoreFields(): void {
    const wrapper_div = document.getElementById("wrapper");
    const template = require("./my-template.html")

    container.innerHTML += template
}

Новые поля добавляются правильно.

Мой первый вопрос: это лучший способ загрузки внешнего html? (у меня нет тега сценария "текст/шаблон")

Или я должен создать новый компонент и добавить его в форму maim?

....
<input type="text" .... />
<my-new-fields></my-new-fields>
...
<button></button>

Если да, то как добавить новые?

Также прочитал о ngTemplateOutlet, но не понял, как это можно применить к моему случаю. я совсем запутался в этом

Второй. Хотя мои новые поля отображаются событиями щелчка, они не запускают мои функции.

пример:

<span class="fa fa-remove" (click)="cleanInput()"></span>
// this is not executing the cleanInput function

Спасибо


javascript angular addeventlistener html-templates
person saomi    schedule 11.10.2019    source источник
comment
Нет. Это ужасная идея. Проверьте это: stackoverflow.com/questions/54521848/   -  person Stan    schedule 11.10.2019
comment
Вы должны использовать реактивную форму. Взгляните на эту статью, это может вам помочь. blog.karmacomputing.co.uk /   -  person Sudipto Mukherjee    schedule 11.10.2019

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете использовать атрибуты *ngIf или [hidden] для раздела, который хотите скрыть.

Пример:

<input [(ngModel)] = "model1">
<your-component *ngIf="areExtraFieldsVisible">
</your-component>
<button (click)="showExtraFields()"></button>
person Allabakash    schedule 11.10.2019
comment
Но у меня может быть несколько полей. поэтому мне нужно будет динамически добавлять ‹your-compoenent› - person saomi; 11.10.2019

arrow_upward
0
arrow_downward

1, вы можете использовать флаг в своем компоненте, чтобы показать/скрыть данные при нажатии кнопки:

в компоненте:

showData: boolean = false;

в html:

    <button (click)="this.showData=!this.showData">show/hide</button>

    <div *ngIf="this.showData">
        ...
    </div>
person Bence Uszkai    schedule 11.10.2019
comment
Это не одна группа полей. Пользователь может добавлять несколько раз эту группу полей - person saomi; 11.10.2019
comment
используйте компонент списка, который содержит formArray, и вы можете добавить formGroup к formArray. Компонент списка содержит компонент, который содержит formGroup поля. - person Bence Uszkai; 11.10.2019