bixi/packages/core/editable-table/demo/with-form.md

企业级中后台前端解决方案

---
title:
  zh-CN: 支持 formControlName
order: 17
---

## zh-CN

当使用 `formControlName` 属性时，不需要传递 rows 属性，通过 formGroup 传递 rows 内容，因为会被覆盖，其他属性使用方式不变。

## en-US

```ts
import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'bixi-editable-demo-simple',
  template: `
    <div>
      <form nz-form [formGroup]="form" (ngSubmit)="submitForm()">
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24"> 输入框 </nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="24">
            <input placeHolder="请输入" rows="4" nz-input formControlName="input"/>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24"> 可编辑表格 </nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="24">
            <bixi-editable-table [cols]="cols" formControlName="editableForm" (rowsChange)="onRowsChange($event)"></bixi-editable-table>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-control [nzSpan]="14" [nzOffset]="6">
            <button nz-button nzType="primary">Register</button>
          </nz-form-control>
        </nz-form-item>
      </form>
      <br/>

      <br/>

      {{formValue}}
    </div>
  `
})
export class TestComponent {
  form: FormGroup;
  formValue = '';
  constructor(
    private fb: FormBuilder,
  ) {
    this.form = this.fb.group({
      input: ['1'],
      editableForm: [this.rows]
    })
  }
  cols = [
    {
      key: 'name',
      name: '审核点'
    },
    {
      key: 'relation',
      name: '关系'
    }
  ];
  rows = [
    {
      name: '组合1',
      relation: '等于'
    },
    {
      name: '组合2',
      relation: '小于'
    }
  ];

  submitForm() {
    console.log(this.form)
    this.formValue = JSON.stringify(this.form.value);
  }

  onRowsChange(val: any) {
    console.log(val);
  }
}
```