@anarchitects/forms-angular

Angular domain UI components for consuming the Anarchitecture Forms platform. This package wires together configuration, data-access, state, feature, and UI layers so Angular applications can request contract-driven form definitions, render them dynamically, and submit responses.

Features

Layered Angular integration for dynamic form retrieval, rendering, and submission
Shared DTO/model contracts aligned with generated OpenAPI clients
Composable secondary entry points for app-specific architecture choices

Entry points

@anarchitects/forms-angular exposes several secondary entry points, each mapped to a specific layer in the 3-tier architecture:

Entry point	Purpose
`@anarchitects/forms-angular/config`	Injection tokens and provider helpers for base API configuration.
`@anarchitects/forms-angular/data-access`	HTTP adapters that call the generated forms REST API.
`@anarchitects/forms-angular/state`	Signal store that orchestrates requests, caching, and submission state.
`@anarchitects/forms-angular/feature`	Feature components that combine state, UI, and orchestration.
`@anarchitects/forms-angular/ui`	Presentational form/list/detail components with layout/template contracts.

Each layer can be consumed independently or as a combined stack, depending on what your app needs.

Installation

npm install @anarchitects/forms-angular @angular/forms @angular/common@">=20" @ngrx/signals

You will also need the TypeScript foundation package:

npm install @anarchitects/forms-ts

Usage

Quick start

// app.config.ts
import { provideHttpClient, withFetch } from '@angular/common/http';
import { provideFormsDefaults } from '@anarchitects/forms-angular/config';

export const appConfig = {
  providers: [provideHttpClient(withFetch()), provideFormsDefaults()],
};

// feature shell component
import { Component } from '@angular/core';
import { AnarchitectsFeatureForm } from '@anarchitects/forms-angular/feature';

@Component({
  selector: 'app-contact-form',
  imports: [AnarchitectsFeatureForm],
  template: ` <anarchitects-forms-feature-form [formId]="'contact_default'" [formVersion]="1" (submitted)="onSubmitted()" /> `,
})
export class ContactFormRoute {
  onSubmitted(): void {
    console.log('Form was sent');
  }
}

Behind the scenes the feature component uses the signal store to request the form definition, renders it with the UI layer, and posts submissions via the data-access service.

Working with individual layers

You can opt into specific slices of the stack:

Config – call provideFormsConfig({ apiResourcePath: 'forms' }) to override the default API resource segment.
Data-access – inject FormsApi from the data-access entry point to integrate the OpenAPI client with custom facades or state.
State – inject the FormsStore signal store to orchestrate requests and expose reactive signals for loading/error/submission status.
UI – use AnarchitectsUiForm, AnarchitectsFormsUiSubmissionList, and AnarchitectsFormsUiSubmissionDetail directly if you manage orchestration elsewhere.

Publishing

This package is published as public npm modules. Secondary entry points are shipped as tree-shakeable ESM bundles so only the layers you import are included in your application bundle.

Development notes

Keep HTTP integration inside data-access; avoid direct endpoint calls in components.
Keep orchestration in feature/state, and keep ui components presentational.
Keep route and form contract alignment by regenerating OpenAPI when DTO/controller schemas evolve.

License

Released under the Apache License 2.0.

Anarchitecture Bricks Docs