Dynamically create forms based on JSON object

Question

I'm currently working on an app that allows users to answer questions about themselves. I'm retrieving these questions from an API. Now, I want to create a form with these questions as the inputs. I'm currently using something similar to the simple form described here: http://learnangular2.com/forms/

Now, I'm wondering if it's possible to create this form based on the questions my API serves. I can get a JSON object with all the questions, but is it possible to create a for loop that populates the form with the questions in the JSON object? This part of the code in the example above gives me the impression that it is not possible this way:

this.loginForm = fb.group({
  email: ["", Validators.required],
  password: ["", Validators.required]
});

tchelidze · Accepted Answer · 2016-06-01 19:12:24Z

2

Use Template-Driven forms

Use ngFor to loop thru questions and create ngControl for each.

ngControl names will be set to Question1, Question2 ...

<form #form="ngForm" (ngSubmit)="logForm(form.value)">
  <div *ngFor="#question of questionsList; #i = index">
    <label>{{question}}</label>
    <input type="text" [ngControl]="'Question' + i">
  </div>
 <button type="submit">Submit</button>
</form>

logForm method, inside corresponding component, will get object containing key (ngControl name) and value (corresponding input value)

edited Jun 1, 2016 at 19:12

answered Jun 1, 2016 at 18:58

tchelidze

8,3781 gold badge33 silver badges51 bronze badges

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

Collectives™ on Stack Overflow

Dynamically create forms based on JSON object

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