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

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

0 голосов
/ 11 октября 2019

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

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

    container.innerHTML += template
}

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

Мой Первый вопрос : это лучший подход для загрузки внешнего HTML? (У меня нет тега «text / template»)

Или я должен создать новый компонент и добавить его в форму 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

Спасибо

Ответы [ 2 ]

0 голосов
/ 11 октября 2019

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

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

showData: boolean = false;

в html: 

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

    <div *ngIf="this.showData">
        ...
    </div>
0 голосов
/ 11 октября 2019

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

Пример: 

<input [(ngModel)] = "model1">
<your-component *ngIf="areExtraFieldsVisible">
</your-component>
<button (click)="showExtraFields()"></button>
...