Build a complete form
This tutorial builds a customer profile editor one capability at a time. Every step starts from working code and adds one concept, so you can stop at the level your application needs.
By the end, the form will include:
- A typed model owned by an Angular component.
- Native controls connected with
[formNode]. - Built-in validation and error rendering.
- Nested addresses and reactive state.
- A dynamic contacts array with stable identity.
- Cancelable asynchronous username validation.
- Native form submission and pending UI.
🚀 Before you begin​
Install the package in an Angular 22 application:
npm install --save @ngblocks/form-nodes
The tutorial uses standalone components and Angular's built-in control flow. The form model itself does not require dependency injection.
🧠The progression​
- Declare the model
- Bind controls
- Add validation
- Add nesting and reactive state
- Manage a dynamic array
- Validate asynchronously
- Submit the form
📖 Tutorial and reference together​
Each step ends with a small set of related guides, API references, and cookbook recipes. Follow the steps in order for a working progression, then use those contextual links when you need exact behavior, complete signatures, or a focused production pattern. The main documentation overview also groups pages by task.
Continue with Step 1: Declare the model.