[英]get multiple checkbox value as an array in angular
我正在尝试从这里的多个复选框中获取值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);
}
有人能帮我吗?
您的代码中有几个错误。
您指出的最后一个 stackblitz(从这个 SO中消失)是一种“富有想象力的”方式来管理一系列复选框以提供存储字符串数组的 formControl。 这个想法是输入有[checked]
和(change)
,但不是formControlName (这是因为起初复选框变成了“选中”)。 formControl 在表单中没有输入。 是的,formControl 存在,但没有输入。
[checked]
的[checked]
是一个函数,指示“选项”是否包含在控件的值中(使用 indexOf)
(change)
作为参数,索引 - 本地化 formControl -,“选项”的值以及是否检查。
一个更简单的 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,j, 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 添加“代码”,如果checked=false 删除“代码”。 嗯,有一个困难是“排序”响应。 为了对响应进行排序,我们比较“选项”中的 indexOf 值
我使用辅助变量“选项”来获取“选项”
2.-更改您的功能 onChange
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 2","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));
}
注意:您需要修改代码,实际上,当您创建表单时,您所有的“答案”都是数组(只需要排列它们是复选框的答案的“答案”)
更新为了避免在 answer 为空时出现错误,我们可以或避免在创建表单时,或者,另一种选择,将代码更改为
[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"])
是的,要获得“答案”,我们可以使用索引使用“get”。 Perhafs 这很容易理解,因为当我们使用 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"]},
]
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.