Angular2 - 动态FormArray复选框

Question

我在angular2和typescript中构建了一个Form.我尝试动态添加一个复选框列表,这对我不起作用,我的错误在哪里？

模板代码:

<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>

Typescript代码:

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不是函数"

复选框的数量是正确的,但文本丢失,我无法通过用户选择更新表单结果.

1. 这个错误意味着什么？

2. 如何在复选框旁边插入正确的文字？

3. 如何将用户选择更新为表单值？

Answer 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)

这是一个演示它的插件：http://plnkr.co/edit/OTiqwr1oCb8uEThQyDHx ?p=preview