Forms designed for Angular signals
Typed forms that stay close to your model.
Compose fields, nested objects, and dynamic arrays with precise TypeScript inference, reactive validation, and one binding for native and custom controls.
import { Component } from '@angular/core';
import { form, field, required, FormNodeDirective } from '@ngblocks/form-nodes';
@Component({
selector: 'app-profile-editor',
imports: [FormNodeDirective],
template: `
<input [formNode]="form.username" />
<p>Hello {{ form.username() }}</p>
<input [formNode]="form.email" />
<p>Your email is {{ form.email() }}</p>
`,
})
export class ProfileEditor {
form = form({
username: field(''),
email: field('', [required]),
});
}
💡 Inferred end to end
Values, patches, validators, children, and array items retain the shape of the form you declared.
âš¡ Reactive by construction
Values and state are signals. Validators track the dependencies they read without extra wiring.
🔌 Angular when you need it
Use the model outside injection context, then connect native, signal, or CVA controls with [formNode].
Find your starting point​
- New to Form Nodes? Install the package, then build your first form in a single Angular component.
- Prefer learning step by step? The tutorial builds a customer profile editor from its model through validation and submission.
- Working on an existing form? Choose a task below, look up an API in the reference, or start with a symptom in Troubleshooting.
🔗 Learn by task​
ModelCreate a form treeFields, forms, nullability, arrays, and inferred values.ValidateExpress validation rulesBuilt-in, custom, conditional, cross-field, and asynchronous validation.FeedbackDisplay validation messagesExamples below native inputs and inside custom controls, with templates, styling, and animation.ConnectBind Angular controlsNative elements, custom signal controls, CVAs, focus, and state classes.FilesWork with file inputsSingle and multiple selections, file names, reactive values, and upload examples.RepeatManage dynamic arraysStable identity, reconciliation, insertion, removal, movement, and patching.SubmitRun submission workflowsValidation policy, native forms, pending actions, reset, and focus.LocalizeConfigure messages onceReactive messages at global, provider, form-tree, and validator scope.ScaleExplore a complete formA large Angular form with nested branches, dynamic arrays, validation, state, and submission.ReferenceBrowse every validatorConcrete signatures, examples, error shapes, empty values, and reactive constraints.TutorialBuild a form progressivelyStart with a model and add Angular controls, validation, nesting, arrays, async work, and submission.CookbookSolve a common form problemFocused recipes for confirmation fields, conditional UI, API data, arrays, i18n, and custom controls.