← ClaudeAtlas

formio-angular-formlisted

Embed a Form.io form in an Angular application with `@formio/angular`'s `<formio>` component — mounting, the event surface, the live `Webform` instance, change detection under zone.js and zoneless, project URLs, styling, the server-rendering limit, and when to drop to the renderer directly. Reached by handoff from `formio-angular`'s embed branch. Use when the user says "embed a Form.io form in Angular", "render a form in my Angular app", "add a `<formio>` component to this page", or "control an embedded Form.io form from Angular". Not for: framework-agnostic embedding and every field-behaviour question — conditionals, calculated values, validation, cascading selects (see `formio-form`); resource CRUD screens (see `formio-angular-resources`); creating a form that does not exist yet (see `formio-form-builder`); the raw SDK reference (see `formio-sdk`).
formio/ai · ★ 7 · Web & Frontend · score 75
Install: claude install-skill formio/ai
# Embedding a Form.io form in Angular > **Nested sub-skill.** `plugin/skills/formio-angular/formio-angular-form/SKILL.md` sits inside the `formio-angular` skill folder, beside `formio-angular-resources`. The `name: formio-angular-form` frontmatter is there so recursive-scan clients classify the file; it is not a separately-registered top-level skill. The `formio-angular` parent reaches this document the same way it reaches `SETUP.md` and `AUTH.md` — it is **loaded by path**. Never invoke it by frontmatter name; open the file. ## One component `FormioComponent` from `@formio/angular`, as the element `<formio>`: ```html <formio [src]="formUrl" (submit)="onSubmit($event)"></formio> ``` That is the whole entry point. It fetches the definition, renders it, saves the submission, places server errors on the fields that caused them, and shows its own alert and loading chrome. Its inputs are reactive, so a parent can change the form, the submission, or the language after the first render. There is no component decision to make on arrival. When `<formio>` is genuinely the wrong tool — a form mounted outside Angular's tree, a page that must not carry `@formio/angular` at all — the second path is the renderer itself, and [references/renderer-directly.md](./references/renderer-directly.md) is where that goes. It is a different job, not a different component. ## Capture the workspace root first This branch is exempted from the parent skill's workspace pre-flight, so nothing has cap