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方法，在相应的组件内部，将获得包含键（ngControl名称）和值（对应的输入值）的对象

基于JSON对象动态创建表单

1 个答案: