Datagrid 绑定到响应式表单控件答案

【问题标题】：Datagrid bind to reactive form controlDatagrid 绑定到响应式表单控件
【发布时间】：2018-01-06 03:23:59
【问题描述】：

我想知道是否可以将响应式表单的控件绑定到 Clarity 设计系统的数据网格 clrDgSelected 2 路绑定？

我在他们的website 上使用这里的示例来做一个简单的数据网格并将其与反应表单集成。

我的表格很简单：

constructor(
    private fb: FormBuilder,
  ) {
    this.testForm= this.fb.group({
      title: ['', Validators.required],
      selectionList: ['', Validators.required]
    });
  }

现在我想合并选择列表，而不是按照他们的示例选择。

<clr-datagrid [(clrDgSelected)]="selected">
    <-- ... -->
    <clr-dg-row *clrDgItems="let user of users" [clrDgItem]="user">
        <-- ... -->
    </clr-dg-row>
   <-- ... -->
</clr-datagrid>

这样我可以控制表单的有效性以及确保直接填充 selectionList。

【问题讨论】：

标签： angular vmware-clarity

【解决方案1】：

你可以做这样的事情。它可能只适用于选择。 inputData 是可能从数据库中持久化的任何内容，例如：

constructor(private fb: FormBuilder) {
  this.testForm = this.fb.group({
    title: ['', Validators.required],
    selectionList: this.fb.array([])

    this.setSelectionList(inputData);
}

...

setSelectionList(inputData) {
  const initFormGroups = inputData.map(datum => this.fb.group(datum));
  const initFormArray = this.fb.array(initFormGroups);
  this.testForm.setControl('selectionList', initFormArray);
}


get selectionListFCs(): FormArray {
  return this.testForm.get('selectionList') as FormArray;
}

get selected() {
  return this.selectionListFCs.value;
}

set selected(selectedUsers) {
  this.selectionListFCs.setValue(selectedUsers);
}

【讨论】：