复选框的动态 FormArray答案

【问题标题】：Dynamic FormArray for checkboxes复选框的动态 FormArray
【发布时间】：2017-04-19 19:03:15
【问题描述】：

我在 angular2 和 typescript 中构建了一个表单。我尝试动态添加复选框列表，但它对我不起作用，我的错误在哪里？

模板代码：

<div formArrayName="categories">
   <div class="form-group" *ngFor="let category of updateDetailsForm.controls.categories.controls; let i = index">
      <label>
        <input type="checkbox" formControlName="{‌{i}}">
          {‌{category.name}}
      </label>
   </div>
</div>

打字稿代码：

updateDetailsForm: FormGroup;
private categories : Category[] = []

constructor(private router: Router,
            private ss : SearchService,
            private formBuilder: FormBuilder)
{
   this.initForm() // before the categories loaded
   this.ss.getAllCategories().subscribe(
     data => {
       this.categories = data
       this.initForm() // refresh the form with categories
     }
   )
 }

initForm() {
  let allCategories: FormArray = new FormArray([]);
  for (let i = 0; i < this.categories.length; i++) {
    allCategories.push(
      new FormGroup({
        'name': new FormControl([this.categories[i].categoryName])
      })
    )
  }
  this.updateDetailsForm = this.formBuilder.group({
    'image' : [''],
    'categories': allCategories
  })
}

这是我的 UI 结果，我收到以下错误：

“内联模板：17:33 引起：control.registerOnChange 不是函数”

复选框的数量是正确的，但缺少文本，我无法使用用户选择更新表单结果。

错误是什么意思？
如何在复选框旁边插入正确的文本？
如何将用户选择更新为表单值？

【问题讨论】：

标签： forms angular checkbox typescript

【解决方案1】：

您已经构建了表单模型，我们需要访问您推送到数组中的每个 FormGroup，然后访问其中的命名控件：

<span formGroupName="{{i}}">
  <input type="checkbox" formControlName="{{category.name}}">
  {{category.name}}
</span>

我们还需要调整推送值的方式，以便将名称设置为唯一而不是始终设置为"name"：

let fg = new FormGroup({});
fg.addControl(this.categories[i].name, new FormControl(false))
allCategories.push(fg)

这里有一个 plunker 来演示它：http://plnkr.co/edit/OTiqwr1oCb8uEThQyDHx?p=preview

【讨论】：

【解决方案2】：

我认为由于您的组件变量和表单组控件的名称相同categories，您会遇到错误。通过在您的组件和表单 HTML 中进行以下更改来检查它：

您可以查看FormArrayName directive以获取更多参考。

//组件

updateDetailsForm: FormGroup;
private allCategories : Category[] = []

constructor(private router: Router,
            private ss : SearchService,
            private formBuilder: FormBuilder) {
  this.initForm() // before the categories loaded
  this.ss.getAllCategories().subscribe(
    data => {
      this.allCategories = data
      this.initForm() // refresh the form with categories
    }
  )
}
initForm() {
  let allCategories: FormArray = new FormArray([]);
  for (let i = 0; i < this.allCategories.length; i++) {
    allCategories.push(new FormControl());
  }
  this.updateDetailsForm = this.formBuilder.group({
    'image' : [''],
    'categories': allCategories
  })
}

// 表单 HTML

<div formArrayName="categories">
   <div class="form-group" *ngFor="let category of categories.controls; let i = index">
      <label>
        <input type="checkbox" formControlName="i">
          {‌{allCategories[i].name}}
      </label>
   </div>
</div>

【讨论】：

谢谢，但我检查了它，我也遇到了同样的问题。