angular - Datagrid 绑定到响应式表单控件

Question

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

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

我的表格很简单：

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

现在我想合并 teh selectionList 而不是按照他们的示例选择的。

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

通过这种方式，我可以控制表单有效性并确保直接填充 selectionList。

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