在Angular中使用响应式表单，我们可以使用FormBuilder创建表单并将其绑定到HTML模板中。使用reactive form中的表格进行列显示时，我们可以使用ngx-datatable组件来管理表格。

步骤如下：

1.安装ngx-datatable

运行以下命令安装ngx-datatable（要求至少使用Angular 4.3）：

npm install @swimlane/ngx-datatable --save

2.导入ngx-datatable模块

Import NgxDatatableModule中的@NgModule装饰器：

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { NgxDatatableModule } from '@swimlane/ngx-datatable';

@NgModule({ imports: [BrowserModule, FormsModule, ReactiveFormsModule, NgxDatatableModule], declarations: [AppComponent], bootstrap: [AppComponent] })

export class AppModule { }

3.创建响应式表单

使用FormBuilder创建响应式表单，然后将表单绑定到HTML模板中。

例如，以下是一个简单的表单，其中包含两个输入字段（名称和描述）以及“添加项目”按钮：

export class AppComponent {

projectForm = this.fb.group({ name: ['', Validators.required], description: [''] });

get name() { return this.projectForm.get('name'); }

get description() { return this.projectForm.get('description'); }

onSubmit() { // save the new project } }

 

Add Project 

4.使用NgxDatatable

为了在表格中显示表单数据，我们需要使用NgxDatatable组件。我们将表格绑定到我们的