如何解决复选框使所有反应形式都以角形形式签入
我想为我的调查应用程序创建一个用户响应页面,我使用此代码遍历表单中的数据
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>
解决方法
我看到您正在尝试从JSON创建表单。已经有一个维护良好的库ng-dyanamic-forms。我已经用过了它有很多好的功能。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。