如何解决获取多个复选框值作为角度数组
我正在尝试从此处的多个复选框中获取值https://stackblitz.com/edit/angular-ivy-uahtjx,我尝试了这种方法,但对我而言却没有https://stackblitz.com/edit/quiz-answer-value,我认为这是因为JSON模式不同,第一个是数组,第二个是对象。
我这样设置html
<div *ngFor="let option of form.options">
<label><input (change)="onChange(i,j,form.code,check.checked)" #check
[value]="answers[i].value.forms[j].answer.toString().indexOf(form.code)>=0" formControlName="answer" type="checkbox">{{option}}</label>
</div>
对于这样的更改功能
onChange(indexi: number,indexj: number,code: string,isChecked: boolean) {
const control = this.answerArray.at(indexi).get("forms")['controls'][indexj].get('answer');
console.log(control);
}
有人可以帮我吗?
解决方法
您的代码中有几个错误。
您指示的最后一个堆栈闪电(来自this SO)是一种“富有想象力”的方式,可以管理一系列复选框以馈送存储字符串数组的formControl。这个想法是输入有[checked]
和(change)
,但是不是 formControlName(这是因为起初复选框已被“选中”)。 formControl在表单中没有输入。是的,formControl存在,但是没有输入。
复选框的[checked]
是一个函数,用于指示是否在控件的值中包含“选项”(使用indexOf)
(change)
的索引(用于对formControl进行本地化),“ option”的值以及是否进行检查作为参数。
一个more simple stackblitz来显示这个概念:
<!--see that "answer" has no input,it's only a variable in .ts-->
<div *ngFor="let option of options">
<input #check type="checkbox"
[checked]="answer.indexOf(option)>=0"
(change)="onChange(option,check.checked)"
>
{{option}}
</div>
answer=["check 2"]
options=["check 1","check 2","check3"]
onChange(option:string,checked:boolean)
{
if (checked && this.answer.indexOf(option)<0)
this.answer=[...this.answer,option]
.sort((a,b)=>this.options.indexOf(a)>this.options.indexOf(b)?1:-1)
if (!checked)
this.answer=this.answer.filter(x=>x!=option)
}
好吧,用您的代码
1.-更改表格(请参阅代码中的注释)
<div *ngIf="form.type == 'checkbox'">
<p>{{form.title}}</p>
<div *ngFor="let option of form.options">
<!--in your code WRONG (change)="onChange(i,j,form.code,check.checked)" -->
<!-- see that we need send the "option",not the form.code-->
<label><input #check (change)="onChange(i,option,check.checked)"
<!--use checked,not value,and remove the "toString"-->
[checked]="answers[i].value.forms[j].answer.indexOf(option)>=0"
<!--see that we has no formControlName="answer" -->
type="checkbox">{{option}}</label>
</div>
</div>
onChange函数,仅当checked = true时添加“ code”,而checked = false时删除“ code”。好吧,有一个难题是对响应进行“分类”。为了对响应进行排序,我们比较“选项”中值的indexOf
我使用辅助变量“ options”来获取“ options”
2.-将功能更改为onChange by
onChange(indexi: number,indexj: number,code: string,isChecked: boolean) {
const control = this.answerArray.at(indexi).get("forms")["controls"][indexj]
.controls.answer;
const options=this.listFormField[indexi].sectionItems[indexj].options
//options will be,eg. ["check 1","check 3"]
if (isChecked && control.value.indexOf(code) < 0)
control.setValue(
[...control.value,code].sort((a: string,b: string) =>
options.indexOf(a) >options.indexOf(b)
? 1
: -1
)
);
if (!isChecked && control.value.indexOf(code) >= 0)
control.setValue(control.value.filter(x => x != code));
}
注意:您需要修改代码,实际上,当您创建表单时,您所有的“答案”都是数组(只需要将它们作为复选框的答案的“答案”数组)即可。
已更新为避免错误(如果答案为空),我们可以或避免在创建表单或另一个选项时将选中的代码更改为
[checked]="(answers[i].value.forms[j].answer || []).indexOf(option)>=0"
对于路径值,如果只有一个元素,例如
const i=0
const j=1
this.response.get('answers.'+i+'.forms.'+j+'.answer')
.patchValue(["check 1","check 2"])
是的,要获得“答案”,我们可以使用带有索引的“获取”。可以理解这一点,因为当我们使用formGroup的formArray时,我们写了[formGroupName]="i"
。如果要在FormGroup上创建pathValue,则需要考虑到,如果在数组上创建pathValue,则pathValue不会将元素添加到formArray,因此,如果我们发送更多的元素,则不会添加。此外,如果我们发送的元素pathValue较少,则删除这些元素
考虑到这一点,我们也可以做到
this.response.get('answers.'+i+'.forms')
.patchValue(
[
{answer:"radio 2"},{answer:["check 1","check 2"]},{answer:"text input"},{answer:"text area"},{answer:["check 6"]},]
)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。