# @covalent/dynamic-forms 中文文档

规范地址：https://npmcn.com/package/%40covalent/dynamic-forms/

版本：11\.23\.0
npm 元数据更新时间：2026-10-02T15:31:38.958Z
中文译文更新时间：2026-11-10T21:34:14.692Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40covalent/dynamic-forms
原文对照：https://npmcn.com/package/%40covalent/dynamic-forms/?lang=original
项目主页：https://github.com/teradata/covalent#readme
源码仓库：https://github.com/teradata/covalent

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：298 kB，5 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：@angular/core 20\.x\.x，@covalent/core 11\.23\.0，@angular/common 20\.x\.x
- 首次发布：2016-12-30T19:46:54.824Z
- 最新版本发布：2026-10-02T15:31:38.743Z
- 近 30 天下载量：4025（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：428（近 12 个月 74 个）

## 中文简介

Teradata UI 平台动态表单模块

## 安装

```sh
npm install @covalent/dynamic-forms
```

也可以使用：`pnpm add @covalent/dynamic-forms`、`yarn add @covalent/dynamic-forms`、`bun add @covalent/dynamic-forms`

## README

# td-动力形式

## API 总结

#### 投入

-   元素: ITdDynamicElementConfig \[\]
    -   JS Object 将视其配置来制作元素.
    -   需要\[名 财产.

#### 属性( 只读)

-   窗体: 窗体组
    -   动态的 Getter 属性 \[FormGroup\].
-   无效:布尔
    -   动态 \[FormGroup\] 的 Getter 属性 .
-   值: 任意
    -   动态 \[FormGroup\] 的 \[value\] 属性.
-   错误 : {\[名称:字符串\]: 任何}
    -   动态 \[FormGroup\] 的 \[errors\] 获取属性 .
-   控件 : {\[键:字符串\]: 抽象控制}
    -   动态 \[FormGroup\] 的 \[控 的获取属性 .

#### 方法

-   刷新: 函数
    -   刷新窗体并重新提交所有验证符/元素修改

## 设置

在您的 NgModule 中导入 \[covalentDynamicFormsModule\] :

```typescript
import { CovalentDynamicFormsModule } from '@covalent/dynamic-forms';
@NgModule({
  imports: [
    CovalentDynamicFormsModule,
    ...
  ],
  ...
})
export class MyModule {}
```

## 使用量

`td-dynamic-forms` 元素动态生成窗体

传递一组执行 \[ITdDynamicElementConfig\] 的javascript对象,其信息要提供给\[元素\]属性.

```typescript
// Property values to be set in custom component
export interface ITdDynamicElementCustomConfig {
  [name: string]: any;
}

export interface ITdDynamicElementConfig {
  label?: string;
  name: string;
  hint?: string;
  type: TdDynamicType | TdDynamicElement | Type<any>;
  required = false;
  disabled?: boolean;
  min?: any;
  max?: any;
  minLength?: any;
  maxLength?: any;
  selections?: string[] | { value: any; label: string }[];
  multiple?: boolean;
  default?: any;
  flex?: number;
  validators?: ITdDynamicElementValidator[];
  customConfig?: ITdDynamicElementCustomConfig;
}
```

注:对于自定义类型,需要执行 `[control]` 财产,并用在你的基本元素.

HTML 使用示例 :

```html
<td-dynamic-forms [elements]="elements">
  <ng-template let-element ngFor [ngForOf]="elements">
    <ng-template let-control="control" [tdDynamicFormsError]="element.name">
      <span *ngIf="control.touched || !control.pristine">
        <span *ngIf="control.hasError('required')">Required</span>
        <span *ngIf="control.hasError('min')">Min value: {{element.min}}</span>
        <span *ngIf="control.hasError('max')">Max value: {{element.max}}</span>
        <span *ngIf="control.hasError('minlength')"
          >Min length value: {{element.minLength}}</span
        >
        <span *ngIf="control.hasError('maxlength')"
          >Max length value: {{element.minLength}}</span
        >
      </span>
    </ng-template>
  </ng-template>
</td-dynamic-forms>
```

```typescript
import { ITdDynamicElementConfig, TdDynamicElement, TdDynamicType } from '@covalent/dynamic-forms';
...
/* CUSTOM TYPE */
  template: `<label>{{label}}</label>
              <input [formControl]="control">
              <div *ngIf="errorMessageTemplate && control.errors"
                  class="tc-red-600"
                  [style.font-size.%]="'70'">
                <ng-template
                  [ngTemplateOutlet]="errorMessageTemplate"
                  [ngTemplateOutletContext]="{control: control, errors: control.errors}">
                </ng-template>
              </div>`,
})
export class DynamicCustomComponent {
  /* control property needed to properly bind the underlying element */
  control: FormControl;

  /* map any of the properties you passed in the config */
  label: string;

  /* map the error message template and use it anywhere you need to */
  errorMessageTemplate: TemplateRef<any>;
}
...
})
export class Demo {
  elements: ITdDynamicElementConfig[] = [{
    name: 'input',
    hint: 'hint',
    type: TdDynamicElement.Input,
    required: true,
  }, {
    name: 'textLength',
    label: 'Text Length',
    type: TdDynamicElement.Input,
    minLength: 4,
    maxLength: 12,
  }, {
    name: 'number',
    type: TdDynamicType.Number,
    min: 10,
    max: 80,
  }, {
    name: 'slider',
    label: 'Label',
    type: TdDynamicElement.Slider,
    required: true,
  }, {
    name: 'boolean',
    type: TdDynamicType.Boolean,
    default: false,
    disabled: true,
  }, {
    name: 'select',
    type: TdDynamicElement.Select,
    required: true,
    multiple: false,
    selections: ['A','B','C'],
    default: 'A',
  }, {
    name: 'file-input',
    label: 'Label',
    type: TdDynamicElement.FileInput,
  }, {
    name: 'datepicker',
    label: 'Date',
    type: TdDynamicElement.Datepicker,
  }, {
    name: 'custom',
    label: 'Custom',
    type: DynamicCustomComponent,
    required: true,
  }];
}
```

注:要使用取枣机,请提供执行 `DateAdapter`.单击\[此处\],以了解有关取枣材料的更多信息([https://material.angular.io/ 组件/datepicker/overview#choosing-a-date-执行-和-date-format-s设置](https://material.angular.io/components/datepicker/overview#choosing-a-date-implementation-and-date-format-settings)(中文(简体) )

## 运行单元测试

运行 `nx test angular-dynamic-forms` 执行单元测试.

## 常见问题

### @covalent/dynamic-forms 是什么？

Teradata UI 平台动态表单模块

### 如何安装 @covalent/dynamic-forms？

在项目目录运行 npm install @covalent/dynamic-forms，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/core（20\.x\.x）、@covalent/core（11\.23\.0）、@angular/common（20\.x\.x）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @covalent/dynamic-forms 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @covalent/dynamic-forms 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @covalent/dynamic-forms 可以商用吗？

@covalent/dynamic-forms 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @covalent/dynamic-forms 的下载量有多少？

根据 npm 官方下载统计，@covalent/dynamic-forms 在 2026/10/11 – 2026/11/09 这 30 天内被下载 4,025 次，日均约 134 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @covalent/dynamic-forms 还在维护吗？

最新版本 11\.23\.0 发布于 2026/10/02（1 个月前）；至今共发布 428 个版本，其中过去 12 个月发布了 74 个；首次发布于 2016/12/31。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。