Question

我想知道是否有可能将反应形式的控件绑定到Clarity Design System的datagrid 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。

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

Datagrid绑定到反应式表单控件

1 个答案: