Angular 反应式表单多个复选框选择“全部不工作”

我不熟悉角度的反应形式。我的表单中有多个复选框数组。当用户单击“全选”按钮时，我需要选中所有复选框。在我的示例中，我想检查所有年龄列表值。当用户单击“全部取消选择”时，我想全部取消选择。我试过了，但没用

HTML

语言

{{data.name}}

年龄表

全部检查
取消选择
{{data.name}}

表单值：{myForm.value | json}

应用程序组件

  checkAll(){
    this.ages.forEach(o => o.isChecked = true);
  }
  uncheckAll(){
    this.ages.forEach(o => o.isChecked = false);
  }

ages=[{ageID:100，姓名：“0-10岁”}，{ageID:200，姓名：“10-20岁”}，{ageID:300，姓名：“30-40岁”}，{ageID:400，姓名：“40-50岁”}]
语言=[{langID:1，名称：“英语”}，{langID:2，名称：“泰米尔”}，{langID:3，名称：“印地语”}，{langID:4，名称：“法语”}]
myForm:FormGroup；
构造函数（私有fb:FormBuilder）{}
恩戈尼尼特（）{
this.myForm=this.fb.group({
userage:this.fb.array（[]），
userlanguage:this.fb.array（[]）
});
}
onChange（语言：string，isChecked:boolean）{
const languageFormArray=this.myForm.controls.userlanguage；
如果（已检查）{
push（newformcontrol（language））；
}否则{
让index=languageFormArray.controls.findIndex（x=>x.value==language）
removeAt语言（索引）；
}
}
onAgeChange（年龄：字符串，已选中：布尔值）{
const ageFormArray=this.myForm.controls.userage；
如果（已检查）{
ageFormArray.push（新表单控件（age））；
}否则{
让index=ageFormArray.controls.findIndex（x=>x.value==age）
ageFormArray.removeAt（索引）；
}
}
checkAll（）{
const languageFormArray=this.myForm.controls.userlanguage；
//log（this.myForm.controls['userage']）
this.myForm.controls['userage'].setValue(
此.myForm.controls['userage'].value
.map（值=>true）
);
}

这就是我到目前为止所尝试的

---

如果有人能给我支持，我将不胜感激。

我会用不同的方式来处理这个问题，而是创建一个适合您年龄的

表格。然后将它们切换为
false
或
true
。在提交时，我们过滤那些
为真的复选框
：

ngOnInit（）{
getAPIData（）.订阅（…）=>{
//年龄是否来自api？然后相应地更改！
const ages=this.ages.map（x=>this.fb.control（false））
this.myForm=this.fb.group({
userage:this.fb.array（ages），
});
})
}
//创建一个getter以便于访问（无需）
获取ageArr（）{
将此.myForm.get（'userage'）作为FormArray返回；
}
checkAll（）{
this.ageArr.controls.map（value=>value.setValue（true））
}
取消全部（）{
this.ageArr.controls.map（value=>value.setValue（false））
}

在模板中，我们迭代formarray而不是
ages
数组。另外，请记住将
type=“button”
放在“全选”和“取消全选”按钮上，否则默认情况下它们将被视为
type=“submit”

如果是异步的，最好在表单标签上设置一个
*ngIf


{{ages[i].name}

然后，如前所述，只需在提交时过滤
true
值：

onSubmit（）{
const chosenAges=this.ageArr.value
.map（（age，i）=>age？this.ages[i]。名称：null）
.filter（年龄=>age！==null）；
控制台日志（chosenAges）；
}

你的
我会用不同的方式来处理这个问题，而是创建一个适合你年龄的
表格。然后将它们切换为
false
或
true
。在提交时，我们过滤那些
为真的复选框
：

ngOnInit（）{
getAPIData（）.订阅（…）=>{
//年龄是否来自api？然后相应地更改！
const ages=this.ages.map（x=>this.fb.control（false））
this.myForm=this.fb.group({
userage:this.fb.array（ages），
});
})
}
//创建一个getter以便于访问（无需）
获取ageArr（）{
将此.myForm.get（'userage'）作为FormArray返回；
}
checkAll（）{
this.ageArr.controls.map（value=>value.setValue（true））
}
取消全部（）{
this.ageArr.controls.map（value=>value.setValue（false））
}

在模板中，我们迭代formarray而不是
ages
数组。另外，请记住将
type=“button”
放在“全选”和“取消全选”按钮上，否则默认情况下它们将被视为
type=“submit”

如果是异步的，最好在表单标签上设置一个
*ngIf


{{ages[i].name}

然后，如前所述，只需在提交时过滤
true
值：

onSubmit（）{
const chosenAges=this.ageArr.value
.map（（age，i）=>age？this.ages[i]。名称：null）
.filter（年龄=>age！==null）；
控制台日志（chosenAges）；
}

您的
好的，我们需要摆脱事件驱动模式，开始考虑数据驱动模式，即角度驱动的强度

您不想将其包装在
中。所有这些都会在您尝试提交时导致回发，这与作为单页应用程序的观点背道而驰（请注意，在某些情况下，
是合适的，即验证，并且仅当提交事件被截获时）

我去掉了你的表单组，调整了你的HTML模板，以遵循Angular数据绑定所采用的方法。我添加了使用
[（ngModel）]
将复选框绑定到基础数据，并向数据模型添加了
isChecked
属性

看

模板更改：

  ages = [
  { ageID: 100, name: "0 -10 years", isChecked: false },
  { ageID: 200, name: "10 -20 years", isChecked: false },
  { ageID: 300, name: "30 -40 years", isChecked: false },
  { ageID: 400, name: "40 -50 years", isChecked: false }];

  languages = [
    { langID: 1, name: "English", isChecked: false },
    { langID: 2, name: "Tamil", isChecked: false },
    { langID: 3, name: "Hindi", isChecked: false },
    { langID: 4, name: "French", isChecked: false }];


主代码更改：

  ages = [
  { ageID: 100, name: "0 -10 years", isChecked: false },
  { ageID: 200, name: "10 -20 years", isChecked: false },
  { ageID: 300, name: "30 -40 years", isChecked: false },
  { ageID: 400, name: "40 -50 years", isChecked: false }];

  languages = [
    { langID: 1, name: "English", isChecked: false },
    { langID: 2, name: "Tamil", isChecked: false },
    { langID: 3, name: "Hindi", isChecked: false },
    { langID: 4, name: "French", isChecked: false }];

您的数据：

好的，我们需要摆脱事件驱动模式，开始考虑数据驱动模式，即str
  ages = [
  { ageID: 100, name: "0 -10 years", isChecked: false },
  { ageID: 200, name: "10 -20 years", isChecked: false },
  { ageID: 300, name: "30 -40 years", isChecked: false },
  { ageID: 400, name: "40 -50 years", isChecked: false }];

  languages = [
    { langID: 1, name: "English", isChecked: false },
    { langID: 2, name: "Tamil", isChecked: false },
    { langID: 3, name: "Hindi", isChecked: false },
    { langID: 4, name: "French", isChecked: false }];