How to create a form dynamically based on values in input fields or dropdowns in Angular 2

Question

One of the requirement in my new project is to create a form on one single page in Angular 2. The form is quite complex. I should contains two other templates dynamically populated based on input values. I'll try to explain how it should work.

The page should have three dropdowns (e.g. No.1,2,3) on the top and based on the values from those dropdowns the specific template with a dropdown (No.4) and a couple of input field should be displayed. If the value in the dropdown No.4 is selected one more specific template should be displayed with other input and dropdown fields again. When the inputs are filled and dropdowns selected, the form should be sent.

Each dropdown should be populated by the values received from the server. The form has to be validated too.

My idea is to create a main form and in that form to have a component that will be displayed based on selection of a value in dropdown.

Something like in the parent component:

<form>
  <dropdown [(ngModel)]="layout"></dropdown>
  <layout-1 *ngIf="layout==1"></layout-1>
</form>

In the child component (layout-1):

<div [formGroup]="layoutForm">
  <dropdown [(ngModel)]="subLayout"></dropdown>
  <sub-layout *ngIf="subLayout==1"></sub-layout>
<div>

In the next child component (sub-layout):

<div [formGroup]="subLayoutForm">
  <input/>
  <input/>
  <dropdown><dropdown>
</div>

It'll be kind of 'three-level' nested form.

Any idea how can I do this in Angular 2?

Welcome to StackOverflow. A question should contain the code that demonstrates what you try to accomplish, what you tried and where you failed. — Günter Zöchbauer
– Günter Zöchbauer, Commented Nov 24, 2016 at 10:57

KaFu · Accepted Answer · 2016-11-24 13:57:53Z

0

You can use ngIf to create the specific form. In this ngIf you can use a variable that shows the selected value of the dropdown. Could look like this:

<div *ngIf="selectedValue=='no1'>
... form for no1 here
</div>
<div *ngIf="selectedValue='no2'>
... form for no2 here
</div>
etc.

For Form Validation take a look to this link: FormValidation

But Günter Zöchbauer says in the comment please ask a specific question with your problem and the code that you get a more detailed answer.

edited Nov 24, 2016 at 13:57

answered Nov 24, 2016 at 12:47

KaFu

2,3241 gold badge13 silver badges12 bronze badges

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

Collectives™ on Stack Overflow

How to create a form dynamically based on values in input fields or dropdowns in Angular 2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related