Angular 7 add new fields to form

Question

I have a small form and when the user clicks on an element I want to display some more fields to the form. This action can be done multiple times. So my ideia is to have a separated html file with these fields to be appended to the form so I got this

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

    container.innerHTML += template
}

The new fields are being appended properly.

My first question is: Is this the best approach to load external html? (I don't have the "text/template" script tag)

Or should I create a new component and append it to the maim form?

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

If so, how do I append new ones?

Also read about ngTemplateOutlet but didn't figure out how can apply to my case. I am quite confused about this

Second. Although my new fields are being displayed the click events they are not triggering my functions.

exemple:

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

Thanks

No. It's a horrible idea. Check this out: stackoverflow.com/questions/54521848/… — Stan
– Stan, Commented Oct 11, 2019 at 9:51
You must use reactive form. Have a look at this article this may help you. blog.karmacomputing.co.uk/… — Sudipto Mukherjee
– Sudipto Mukherjee, Commented Oct 11, 2019 at 10:09

Allabakash · Accepted Answer · 2019-10-11 09:54:29Z

0

You can use *ngIf or [hidden] attributes on the section which you want to hide.

Example:

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

answered Oct 11, 2019 at 9:54

Allabakash

2,0371 gold badge12 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

saomi Over a year ago

But I can have multiple fields. so I will need to append <your-compoenent> dynamically

user5304723 · Accepted Answer · 2019-10-11 09:54:56Z

0

1, you can use flag in your component to show/hide data on button click:

in component:

showData: boolean = false;

in html:

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

    <div *ngIf="this.showData">
        ...
    </div>

answered Oct 11, 2019 at 9:54

user5304723

2 Comments

saomi Over a year ago

Its not a single group of fields. The user can add multiple times that group of fields

user5304723 Over a year ago

use a list component, which contains a formArray and you can add formGroup to formArray. List component contains component which contains formGroup fields.

Collectives™ on Stack Overflow

Angular 7 add new fields to form

2 Answers 2

1 Comment

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Linked

Related