# @fieldia/angular 中文文档

规范地址：https://npmcn.com/package/%40fieldia/angular/

版本：0\.36\.1
npm 元数据更新时间：2026-10-28T10:17:10.345Z
中文译文更新时间：2026-11-14T17:54:09.177Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40fieldia/angular
原文对照：https://npmcn.com/package/%40fieldia/angular/?lang=original
项目主页：https://fieldia.dev/
源码仓库：https://github.com/fieldia-dev/fieldia

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

- 包体积（解压后）：69.3 kB，9 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：4 个
- peer 依赖：@angular/core ^21\.0\.0 \|\| ^22\.0\.0
- 首次发布：2026-10-02T07:49:20.491Z
- 最新版本发布：2026-10-28T10:17:10.132Z
- 近 30 天下载量：3924（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：49（近 12 个月 49 个）

## 中文简介

对Fieldia的角装订:在平面-DOM取景器上方,自定义字段为角元件,槽为ng-template.

## 安装

```sh
npm install @fieldia/angular
```

也可以使用：`pnpm add @fieldia/angular`、`yarn add @fieldia/angular`、`bun add @fieldia/angular`

## README

# @ fieldia/ 三角形

[外地](https://fieldia.dev/) angular 21和22中的表单:一个独立的组件 结束 `@fieldia/viewer`,所以一个页面看起来和行为 与任何其他 框架.

```sh
npm install @fieldia/angular
```

```ts
import { Component } from '@angular/core';
import { FieldiaFormComponent } from '@fieldia/angular';
import { createMemoryDataSource } from '@fieldia/core';
import page from './customer.page.json';

@Component({
  selector: 'app-customer',
  imports: [FieldiaFormComponent],
  template: `<fieldia-form [page]="page" [dataSource]="dataSource" [recordId]="1" skin="underline" />`,
})
export class CustomerComponent {
  readonly page = page;
  readonly dataSource = createMemoryDataSource();
}
```

自定义字段可以是角元件( C)`fieldTypes`),槽内容进入 `<ng-template fieldiaSlot="name">`,以及 `formState(form)` 给一个表格的状态 作为信号。 浏览器的选项是同名输入, 但用于 app的翻译: `[translator]`,因为 `[translate]` 绑定到 元素自身的 HTML 属性。 列表页面通过 `(openRecord)` 输出.

该表的活动是产出: `(fieldChange)` -没有 `(change)`,该在 组件的元素也会听到其盒子本身的变化事件—— `(save)`, (中文(简体) ), `(send)`, (中文(简体) ), `(step)` 财务报告和审定财务报表 `(run)`。输出无法回答,所以应用程序的答案是 按钮或按钮 `call` 步骤是 `[answer]` 投入; `(action)` 仍然告诉每个 电话 :

```ts
@Component({
  imports: [FieldiaFormComponent],
  template: `<fieldia-form [page]="page" [dataSource]="dataSource" [pages]="pages"
    [answer]="answer" (fieldChange)="changed($event)" (save)="saved($event)" (run)="ran($event)" />`,
})
export class OrderComponent {
  readonly answer = async ({ action, values }: ActionRequest) =>
    action === 'check_stock' ? { values: { price: await priceOf(values['product']) } } : undefined;
}
```

观众的 `host` 财务报告和审定财务报表 `onOpen` 为: `[actionHost]` 财务报告和审定财务报表 `[openPage]`; 数据 控件来源 `(ready)` 已经 `on`, (中文(简体) ), `setValues` 财务报告和审定财务报表 `run`。 。 。 .

一个页面带有 `continueLater` 打开您服务器上保存的草稿 `[resume]="route.snapshot.queryParamMap.get('resume') ?? undefined"`键 链接 以后继续提供——和 `(draft)` 已被告知每份草稿。 一个新的 `[resume]` 打开这个草案,作为一个新的 `[recordId]` 打开记录.

从链接中填充字段的页面( E)`prefill`阅读浏览器的地址; 在服务器上或在其他页面中显示的应用程序会给出链接 知道吗 `[url]="router.url"`,地址,或 `[url]="{ agent: 'mona' }"`。一个新的 `[url]` 从它开始表格.

**在你的应用程序离开前**,请检查一下: `await handle.form.leave()` 在路线上 `canDeactivate`,在删除前 `<fieldia-form>`,在更改再次挂载的输入之前(`page`, (中文(简体) ), `form`, (中文(简体) ), `dataSource`, (中文(简体) ), `recordId`, (中文(简体) ), `resume`, (中文(简体) ), `url`, (中文(简体) ), `user`, (中文(简体) ), `context`, (中文(简体) ), `dir`, (中文(简体) ), `locale`, (中文(简体) ), `labels`, (中文(简体) ), `fieldTypes`中的名称 `functions`) (中文(简体) ). 角力会立刻摧毁它 所以没有别的东西可以保存 那边的人 它在路上等待一个储蓄,然后问 "丢掉你的 惟有他们的工作有危险,他们选择作假 留下来. `[warnOnLeave]="true"` 拥有浏览器自己的 Back, 重新装入或关闭标签 在有未保存的更改时先询问 .

拟订或更新的部分——外地部分,a 插槽的内容, 应用程序的部件, 地图—— 显示一个小框来命名它,以及 其余的表格继续; `(partError)` 听到声音 `{ error, where }` (无) `(error)`,DOM自己的活动). 观众拒绝的一页 说为什么在表格里 地点, `(partError)` 听见了吗 `{ stage: 'draw', part: 'page' }`应用程序 继续,它抽出一个 它的整张支票发现错误, `{ stage: 'check', part: 'page', warning: true }` (0.36;从0.37拒绝). 麻省理工学院有执照.

## 常见问题

### @fieldia/angular 是什么？

对Fieldia的角装订:在平面-DOM取景器上方,自定义字段为角元件,槽为ng-template\.

### 如何安装 @fieldia/angular？

在项目目录运行 npm install @fieldia/angular，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/core（^21\.0\.0 \|\| ^22\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @fieldia/angular 支持 TypeScript 吗？

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

### @fieldia/angular 支持 ESM 还是 CommonJS？

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

### @fieldia/angular 可以商用吗？

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

### @fieldia/angular 的下载量有多少？

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

### @fieldia/angular 还在维护吗？

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