Question

我想为我的调查应用程序创建一个用户响应页面，我使用此代码遍历表单中的数据

for (let i = 0; i < this.listFormField.length; i++) {
  let arrayForm = new FormGroup({
    name: new FormControl(this.listFormField[i].name),
    forms: new FormArray([])
  });
  (<FormArray>this.response.get("listForms")).push(arrayForm);
  for (let j = 0; j < this.listFormField[i].form.length; j++) {
    let formField = new FormGroup({
      answer: new FormControl(""),
      title: new FormControl(this.listFormField[i].form[j].title),
      type: new FormControl(this.listFormField[i].form[j].type),
      code: new FormControl(this.listFormField[i].form[j].code),
      options: new FormControl(this.listFormField[i].form[j].options)
    });
    (<FormArray>this.response.controls.listForms["controls"][i].controls.forms).push(
      formField
    );
  }
}

我认为可以，因为它可以完全按照我的意愿显示我的数据，但是我得到了意外的行为，首先是复选框，就像这样

当我单击其中的一个复选框时，我的所有复选框都被选中，当我尝试键入1个字符后，在我的文本区域中尝试键入时，它却失去了焦点。如果您不明白我在说什么，请在这里https://angular-ivy-uahtjx.stackblitz.io再次提出问题，有人可以帮助我吗？任何想法都会很有帮助

编辑

这是我的完整html代码

<form [formGroup]="response">
    <div formArrayName="listForms">
        <div *ngFor="let forms of formArrayControls;let i = index" formGroupName="{{i}}">
            <h5>{{forms.value.name}}</h5>
            <div formArrayName="forms">
                <div *ngFor="let items of forms.value.forms; let j = index" formGroupName="{{j}}">
                    <div *ngIf="items.type == 'textarea'">
                        <p> {{items.title}}</p>
                        <textarea [id]="items.title" [name]="items.title" formControlName="answer" [placeholder]="items.title"></textarea>
                    </div>
                    <div *ngIf="items.type == 'textinput'">
                        <p> {{items.title}}</p>
                        <input type="text" [id]="items.title" [name]="items.title" formControlName="answer" [placeholder]="items.title">
                    </div>
                    <div *ngIf="items.type == 'checkbox'">
                        <p>{{items.title}}</p>
                        <div *ngFor="let option of items.options">
                            <label><input [id]="items.title" [name]="items.title" formControlName="answer" type="checkbox"> {{option}}</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <button (click)="submit()">Submit</button>
</form>

Answer 1

我看到您正在尝试从JSON创建表单。已经有一个维护良好的库ng-dyanamic-forms。我已经用过了它有很多好的功能。

复选框使所有反应形式都以角形形式签入

1 个答案: