javascript - 基于JSON对象动态创建表单

Question

我目前正在开发一款应用程序，允许用户回答有关自己的问题。我正在从 API 检索这些问题。现在，我想创建一个包含这些问题作为输入的表单。我目前正在使用类似于此处描述的简单形式的东西:http://learnangular2.com/forms/

现在，我想知道是否可以根据我的 API 提供的问题创建此表单。我可以获得包含所有问题的 JSON 对象，但是是否可以创建一个 for 循环，用 JSON 对象中的问题填充表单？上面例子中的这部分代码给我的印象是这样是不可能的:

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

Answer 1

使用Template-Driven forms

使用 ngFor 循环问题并为每个问题创建 ngControl。

ngControl 名称将设置为 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方法，在相应组件内部，会获取包含key(ngControl名称)和value(对应输入值)的对象