如何从 FormGroup 中访问 FormArray 元素？答案

【问题标题】：How to access FormArray elements from inside FormGroup?如何从 FormGroup 中访问 FormArray 元素？
【发布时间】：2020-09-06 19:02:18
【问题描述】：

// Getter function:
  get getCheckboxes_FormGroup()
  {
    return this.objFormGroup.controls.checkboxesBlogs.controls as FormArray;
  }


  ngOnInit()
  {
    this.objFormGroup = this.objFormBuilder.group(
                            {
                              checkboxesBlogs: new FormArray([])
                            }
                          )

    for( var i = 0; i < this.blogs.length; i++)
    {
      // Generate a checkbox for this blog:
      this.getCheckboxes_FormGroup.push( this.objFormBuilder.group(
                                              {
                                                blogTitle:       [this.blogs[i].title],
                                                blogId:          [this.blogs[i].id],
                                                checkboxValue:   [false],
                                                body:            [this.blogs[i].body],
                                                creationDate:    [this.blogs[i].creationDate],
                                                modificationDate:[this.blogs[i].modificationDate],
                                                category:        [this.blogs[i].category],
                                                visible:         [true]
                                              }
                                            )
                                        );
    }

}

在打字稿中，我尝试像这样访问它：
this.getCheckboxes_FormGroup.controls[i].value.visible = false

这不会给我错误，但它也没有将值设置为 false。

在 HTML 中，我尝试像这样访问它：
<div *ngFor = "let checkboxesBlog of getCheckboxes_FormGroup.controls; " > <a *ngIf = "checkboxesBlog.controls.visible.value === true">

这并没有给我错误，但它始终显示价值为真。

在 typescript 和 html 中访问它的适当方式是什么？

【问题讨论】：

标签： html angular typescript angular-reactive-forms

【解决方案1】：

this.objFormGroup.controls.checkboxesBlogs.controls 不是 FormArray（是 FormGroups 的数组

也许你想说this.objFormGroup.controls.checkboxesBlogs，但最好使用get()来获得控制权

get getCheckboxes_FormGroup()
{
    return this.objFormGroup.get('checkboxesBlogs') as FormArray;
}

所以

this.getCheckboxes_FormGroup.at(i) //is the FormGroup.
this.getCheckboxes_FormGroup.at(i).get('visible') //is the FormControl

如果您需要更改所需的值，请使用“setValue”

this.getCheckboxes_FormGroup.at(i).get('visible').setValue(true)

你也可以使用

this.objFormGroup.get('checkboxesBlogs.'+i+'.visible') //to get the control
this.objFormGroup.get('checkboxesBlogs.'+i+'.visible').setValue(true) //to change the value

在.html中如果只想获取值

getCheckboxes_FormGroup.at(i).get('visible').value
//or
getCheckboxes_FormGroup.value[i].visible
//or
objFormGroup.value.checkboxesBlogs[i].visible'
//or
checkboxesBlog.value.visible  //<--checkboxesBlog is the "variable" you loop
checkboxesBlog.get('visible').value  //<--checkboxesBlog is the "variable" you loop

看你用“value”取值，如果取到form的值需要“遍历”这个值，可以取到数组或者控件的值

请参阅文档：FormGroup 和 FormArray

【讨论】：