ngx-recipe-forms 0.1.2 → 0.1.3

package/README.md

@@ -9,7 +9,7 @@ To write a recipe, follow [`AGENTS.md`](https://github.com/SrenoG/ngx-recipe-for
 
 - **Recipe types**: `FormRecipe<TModel>`, nodes `section`, `row`, `sectionGroup`, `field`, `linked`, `array`; controls and rules constrained by the type of the value; typed builder `recipeBuilder<TModel>()`. The nodes of an `array` item are built with `recipeBuilder<ItemModel, RootModel>()`: their rules read the root through `ctx.root(key)`.
 - **Schema**: `RecipeSchema.build(recipe)` turns each rule into a native function (`required`, `pattern`, `min`…, `validate`, `validateTree`, `validateAsync`, `metadata`), and applies `disabled`, `hidden`, `readonly` (per field, per section or for the whole recipe), the rules of `array` items (`applyEach`), the rules of the whole list (`minItems`, `maxItems`, `unique`, `validate`), non-blocking warnings (`warn`), linked controls and `extraRules`. When a server validator fails, the engine sets the "validation unavailable" warning without blocking: the server still decides on save.
-- **Messages**: priority field → recipe → default → raw message; server errors are shown by their `message`, translated by the caller, otherwise by the key `errors.<code>`; a field error set by the host application as `{ kind: 'server', error: { code, constraint?, message } }` is read as is.
+- **Messages**: priority field → recipe → default → raw message; a field's message appears once the user changes its value (`dirty`), leaves it (`touched`) or submits the form, and a field never changed shows nothing before that; after `reset()` and `resetSubmitAttempt()`, messages stay hidden again until the next change, exit or submit; server errors are shown by their `message`, translated by the caller, otherwise by the key `errors.<code>`; a field error set by the host application as `{ kind: 'server', error: { code, constraint?, message } }` is read as is.
 - **Server errors by path**: `RecipeServerPaths` records the position → key mapping of each `array` when the request is sent; `rooms[2].code` is set on the item that was at position 2, the error clears as soon as the value changes, and whatever cannot be placed comes out through `unplacedServerErrors`.
 - **Sections**: `RecipeSections` (field index, error count, first field in error).
 - **Tailwind layout**, **response time measurement** of server validators.
@@ -95,7 +95,7 @@ provideRecipeForms({
 - **Controls**: the engine renders each control (`text`, `number`, `select`, `date`, `dateMultiple`, `checkbox`) with a template from the `RecipeUi` registry. The host passes to `provideRecipeForms({ ui })` a component that declares one `<ng-template appRecipeTextControl let-field let-inputId="inputId" …>` (`appRecipeNumberControl`, `appRecipeSelectControl`, `appRecipeDateControl`, `appRecipeDateMultipleControl`, `appRecipeCheckboxControl`) per control to render with its design system, and binds its wrapper to it with `[formField]="field"`. A control it does not declare keeps the default template. `RecipeDefaultUiComponent` (`ui/recipe-default-ui.ts`) declares the six templates with the wrappers from `ui/` and serves as a model; the context of each template is typed (`RecipeTextControlContext`…). The registry creates these components once, outside the application tree; a template's view is refreshed with the field that inserts it, and updated in place when its context changes (the control keeps its focus). Learning tests: `specs/ui-seam.learning.spec.ts`.
 - **Messages, buttons, panels and tabs**: the engine renders them through `app-recipe-message`, `app-recipe-button`, `app-recipe-panel` and `app-recipe-tabs`, which keep the id targeted by `aria-describedby`, the placement classes and the state (collapsed panel, active tab), and render the registry template inside: `appRecipeMessage` (translated text, `severity`, `inline`), `appRecipeButton` (label, `variant`, `severity`, `click`), `appRecipePanel` (`let-content` to render with `ngTemplateOutlet`, texts, `collapsed` and `toggle`), `appRecipeTabs` (`let-panels`, one `{ value, template }` per section, to render without ever destroying it, `options`, `value`, `select`, `fill`). The tabs template tracks panels by `value`: the list is recreated on each computation of the context.
 - For a single field, a `SLOT` control renders the template provided by the caller. The wrappers in `ui/` remain those of the default templates. Contracts expected from the wrappers:
-  - every control: Signal Forms contract (`value` or `checked`, `disabled`, `invalid`, `touched`, `touch` output), `inputId` and `describedBy` inputs (`aria-describedby` set on the element that receives focus), a `focus(options?: FocusOptions)` method that passes `options` to the native focus (focus of the first field in error, called with `preventScroll: true`: the engine then scrolls `app-recipe-field` to the center with `scrollIntoView({ block: 'center' })`);
+  - every control: Signal Forms contract (`value` or `checked`, `disabled`, `invalid`, `touched`, `dirty`, `touch` output; `aria-invalid="true"` when invalid and touched or dirty, like the message under the field), `inputId` and `describedBy` inputs (`aria-describedby` set on the element that receives focus), a `focus(options?: FocusOptions)` method that passes `options` to the native focus (focus of the first field in error, called with `preventScroll: true`: the engine then scrolls `app-recipe-field` to the center with `scrollIntoView({ block: 'center' })`);
   - `app-input-text`: `placeholder` (`''` by default), `inputmode` (`'text'` by default), `maxLength` (a `FormValueControl` input, bound by `[formField]` to the `MAX_LENGTH` rule), `icon` (trailing icon, none by default; the engine passes `TextControlDef.icon` as is, an icon name of the host's wrapper, `string` by default and restricted to the host's names if it extends `RecipeIconTypes` (`declare module 'ngx-recipe-forms' { interface RecipeIconTypes { icon: IconEnum } }`); the default wrapper accepts it without drawing it);
   - `app-input-number`: `step`, `minFractionDigits` (decimals always shown), `maxFractionDigits` (decimals allowed when typing, 3 by default);
   - `app-select`: `options: SelectOption<T>[]` (`[]` by default; the field passes a copy, with `label` already translated for a recipe option using `labelKey`), `showClear`, `filter` (search in the list, `false` by default; the engine passes `filter ?? false`; the native `<select>` of the default wrapper ignores it and keeps the browser's first-letter search), `ariaLabelledBy` (id of the label: a design system's dropdown is often not a native field), `placeholder` (text shown when the value is `null`, translation of `SelectControlDef.placeholderKey`, `''` without a key). In `readonly` mode, the list stays focusable (never `disabled` for read-only), does not open, does not change value from the keyboard, has neither chevron nor pointer cursor and carries `aria-readonly="true"`; the `RecipeSelectControlContext` context passes `placeholder` and `readonly` to the template. Contract spec of the default template: `specs/recipe-select-readonly.spec.ts`;
@@ -106,7 +106,7 @@ provideRecipeForms({
   - `app-message`: `severity` (`SeverityEnum`, including the `WARNING` key), `inline`, projected content; `[id]` set on the host element.
 - Translator: `RECIPE_FORM_TRANSLATOR` and `RECIPE_FORM_TRANSLATION_CHANGES` are provided with `useFactory`: the factory can inject the application's i18n service (see "Providers" above). Without a translator, the key is shown as is. The `recipeTranslate` pipe is impure (lazily loaded scopes).
 - `translationChanges`: the `labelKey` options of a `select`, tab titles and count texts are translated by the translator in a `computed`, not by the impure pipe: they are recomputed whenever their data changes and, with `translationChanges`, whenever translations load; without this option, the scope that holds their keys must be loaded before the form renders.
-- Default keys: they are listed by the `RECIPE_FORM_DEFAULT_KEYS` constant (`constants/recipe-form-default-keys.constants.ts`); a host spec checks that its flattened dictionary (`forms.array.add`) contains each of them (model: `projects/playground/src/app/i18n/fr.spec.ts`): `forms.errors.*` (including `minItems`, `maxItems`, `unique`), `forms.warnings.validationUnavailable`, `forms.pending`, `forms.array.*`, `forms.display.errorCountOne` and `forms.display.errorCount` ("{{ count }} error", "{{ count }} errors": the engine uses the first one when `count` is 1 and the second otherwise, since the translator has no plural), `forms.display.collapsePanel` and `forms.display.expandPanel` ("Collapse panel {{ title }}", "Expand panel {{ title }}"), and, outside the constant, `errors.<code>` (or `<scope>.errors.<code>`) for server codes.
+- Default keys: they are listed by the `RECIPE_FORM_DEFAULT_KEYS` constant (`constants/recipe-form-default-keys.constants.ts`); a host spec checks that its flattened dictionary (`forms.array.add`) contains each of them (model: `projects/playground/src/app/i18n/fr.spec.ts`): `forms.errors.*` (including `minItems`, `maxItems`, `unique`, and `invalidDate` for a typed date that does not exist, set by the host date wrapper), `forms.warnings.validationUnavailable`, `forms.pending`, `forms.array.*`, `forms.display.errorCountOne` and `forms.display.errorCount` ("{{ count }} error", "{{ count }} errors": the engine uses the first one when `count` is 1 and the second otherwise, since the translator has no plural), `forms.display.collapsePanel` and `forms.display.expandPanel` ("Collapse panel {{ title }}", "Expand panel {{ title }}"), and, outside the constant, `errors.<code>` (or `<scope>.errors.<code>`) for server codes.
 
 ## In the host application
 

package/fesm2022/ngx-recipe-forms.mjs

@@ -120,7 +120,8 @@ const FORM_ERROR_MESSAGES = {
 	email: "forms.errors.email",
 	minItems: "forms.errors.minItems",
 	maxItems: "forms.errors.maxItems",
-	unique: "forms.errors.unique"
+	unique: "forms.errors.unique",
+	invalidDate: "forms.errors.invalidDate"
 };
 const FORM_LAYOUT_COLUMNS = {
 	[BreakpointEnum.BASE]: {
@@ -248,6 +249,7 @@ const RECIPE_FORM_DEFAULT_KEYS = [
 	"forms.errors.minItems",
 	"forms.errors.maxItems",
 	"forms.errors.unique",
+	"forms.errors.invalidDate",
 	"forms.errors.unknown",
 	"forms.warnings.validationUnavailable",
 	"forms.pending",
@@ -1032,6 +1034,7 @@ var CheckboxComponent = class CheckboxComponent {
 	readonly = input(false, ...ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []);
 	invalid = input(false, ...ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []);
 	touched = input(false, ...ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []);
+	dirty = input(false, ...ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []);
 	describedBy = input(...ngDevMode ? [void 0, { debugName: "describedBy" }] : /* istanbul ignore next */ []);
 	touch = output();
 	control = viewChild.required("control", ...ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []);
@@ -1108,6 +1111,13 @@ var CheckboxComponent = class CheckboxComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			dirty: {
+				classPropertyName: "dirty",
+				publicName: "dirty",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			describedBy: {
 				classPropertyName: "describedBy",
 				publicName: "describedBy",
@@ -1134,7 +1144,7 @@ var CheckboxComponent = class CheckboxComponent {
       type="checkbox"
       [id]="inputId()"
       [attr.name]="name()"
-      [attr.aria-invalid]="invalid() && touched() ? 'true' : null"
+      [attr.aria-invalid]="invalid() && (touched() || dirty()) ? 'true' : null"
       [attr.aria-describedby]="describedBy() ?? null"
       [attr.aria-readonly]="readonly() ? 'true' : null"
       [disabled]="disabled()"
@@ -1166,7 +1176,7 @@ i0.ɵɵngDeclareClassMetadata({
       type="checkbox"
       [id]="inputId()"
       [attr.name]="name()"
-      [attr.aria-invalid]="invalid() && touched() ? 'true' : null"
+      [attr.aria-invalid]="invalid() && (touched() || dirty()) ? 'true' : null"
       [attr.aria-describedby]="describedBy() ?? null"
       [attr.aria-readonly]="readonly() ? 'true' : null"
       [disabled]="disabled()"
@@ -1240,6 +1250,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		dirty: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dirty",
+				required: false
+			}]
+		}],
 		describedBy: [{
 			type: i0.Input,
 			args: [{
@@ -1323,6 +1341,7 @@ var DatePickerMultipleComponent = class DatePickerMultipleComponent {
 	readonly = input(false, ...ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []);
 	invalid = input(false, ...ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []);
 	touched = input(false, ...ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []);
+	dirty = input(false, ...ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []);
 	required = input(false, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
 	ariaLabel = input(...ngDevMode ? [void 0, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
 	describedBy = input(...ngDevMode ? [void 0, { debugName: "describedBy" }] : /* istanbul ignore next */ []);
@@ -1427,6 +1446,13 @@ var DatePickerMultipleComponent = class DatePickerMultipleComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			dirty: {
+				classPropertyName: "dirty",
+				publicName: "dirty",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			required: {
 				classPropertyName: "required",
 				publicName: "required",
@@ -1490,7 +1516,7 @@ var DatePickerMultipleComponent = class DatePickerMultipleComponent {
         [id]="inputId()"
         [attr.name]="name()"
         [attr.max]="maxInputValue()"
-        [attr.aria-invalid]="invalid() && touched() ? 'true' : null"
+        [attr.aria-invalid]="invalid() && (touched() || dirty()) ? 'true' : null"
         [attr.aria-describedby]="describedBy() ?? null"
         [attr.aria-required]="required() ? 'true' : null"
         [disabled]="disabled()"
@@ -1577,7 +1603,7 @@ i0.ɵɵngDeclareClassMetadata({
         [id]="inputId()"
         [attr.name]="name()"
         [attr.max]="maxInputValue()"
-        [attr.aria-invalid]="invalid() && touched() ? 'true' : null"
+        [attr.aria-invalid]="invalid() && (touched() || dirty()) ? 'true' : null"
         [attr.aria-describedby]="describedBy() ?? null"
         [attr.aria-required]="required() ? 'true' : null"
         [disabled]="disabled()"
@@ -1680,6 +1706,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		dirty: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dirty",
+				required: false
+			}]
+		}],
 		required: [{
 			type: i0.Input,
 			args: [{
@@ -1746,6 +1780,7 @@ var DatePickerComponent = class DatePickerComponent {
 	readonly = input(false, ...ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []);
 	invalid = input(false, ...ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []);
 	touched = input(false, ...ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []);
+	dirty = input(false, ...ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []);
 	required = input(false, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
 	describedBy = input(...ngDevMode ? [void 0, { debugName: "describedBy" }] : /* istanbul ignore next */ []);
 	touch = output();
@@ -1822,6 +1857,13 @@ var DatePickerComponent = class DatePickerComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			dirty: {
+				classPropertyName: "dirty",
+				publicName: "dirty",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			required: {
 				classPropertyName: "required",
 				publicName: "required",
@@ -1855,7 +1897,7 @@ var DatePickerComponent = class DatePickerComponent {
       type="date"
       [id]="inputId()"
       [attr.name]="name()"
-      [attr.aria-invalid]="invalid() && touched() ? 'true' : null"
+      [attr.aria-invalid]="invalid() && (touched() || dirty()) ? 'true' : null"
       [attr.aria-describedby]="describedBy() ?? null"
       [attr.aria-required]="required() ? 'true' : null"
       [disabled]="disabled()"
@@ -1886,7 +1928,7 @@ i0.ɵɵngDeclareClassMetadata({
       type="date"
       [id]="inputId()"
       [attr.name]="name()"
-      [attr.aria-invalid]="invalid() && touched() ? 'true' : null"
+      [attr.aria-invalid]="invalid() && (touched() || dirty()) ? 'true' : null"
       [attr.aria-describedby]="describedBy() ?? null"
       [attr.aria-required]="required() ? 'true' : null"
       [disabled]="disabled()"
@@ -1959,6 +2001,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		dirty: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dirty",
+				required: false
+			}]
+		}],
 		required: [{
 			type: i0.Input,
 			args: [{
@@ -1994,6 +2044,7 @@ var InputNumberComponent = class InputNumberComponent {
 	readonly = input(false, ...ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []);
 	invalid = input(false, ...ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []);
 	touched = input(false, ...ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []);
+	dirty = input(false, ...ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []);
 	required = input(false, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
 	step = input(...ngDevMode ? [void 0, { debugName: "step" }] : /* istanbul ignore next */ []);
 	minFractionDigits = input(...ngDevMode ? [void 0, { debugName: "minFractionDigits" }] : /* istanbul ignore next */ []);
@@ -2100,6 +2151,13 @@ var InputNumberComponent = class InputNumberComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			dirty: {
+				classPropertyName: "dirty",
+				publicName: "dirty",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			required: {
 				classPropertyName: "required",
 				publicName: "required",
@@ -2155,7 +2213,7 @@ var InputNumberComponent = class InputNumberComponent {
       [id]="inputId()"
       [attr.name]="name()"
       [attr.step]="step() ?? null"
-      [attr.aria-invalid]="invalid() && touched() ? 'true' : null"
+      [attr.aria-invalid]="invalid() && (touched() || dirty()) ? 'true' : null"
       [attr.aria-describedby]="describedBy() ?? null"
       [attr.aria-required]="required() ? 'true' : null"
       [disabled]="disabled()"
@@ -2187,7 +2245,7 @@ i0.ɵɵngDeclareClassMetadata({
       [id]="inputId()"
       [attr.name]="name()"
       [attr.step]="step() ?? null"
-      [attr.aria-invalid]="invalid() && touched() ? 'true' : null"
+      [attr.aria-invalid]="invalid() && (touched() || dirty()) ? 'true' : null"
       [attr.aria-describedby]="describedBy() ?? null"
       [attr.aria-required]="required() ? 'true' : null"
       [disabled]="disabled()"
@@ -2260,6 +2318,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		dirty: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dirty",
+				required: false
+			}]
+		}],
 		required: [{
 			type: i0.Input,
 			args: [{
@@ -2318,6 +2384,7 @@ var InputTextComponent = class InputTextComponent {
 	readonly = input(false, ...ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []);
 	invalid = input(false, ...ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []);
 	touched = input(false, ...ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []);
+	dirty = input(false, ...ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []);
 	required = input(false, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
 	placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
 	inputmode = input("text", ...ngDevMode ? [{ debugName: "inputmode" }] : /* istanbul ignore next */ []);
@@ -2397,6 +2464,13 @@ var InputTextComponent = class InputTextComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			dirty: {
+				classPropertyName: "dirty",
+				publicName: "dirty",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			required: {
 				classPropertyName: "required",
 				publicName: "required",
@@ -2460,7 +2534,7 @@ var InputTextComponent = class InputTextComponent {
       [attr.name]="name()"
       [attr.inputmode]="inputmode()"
       [attr.maxlength]="maxLength() ?? null"
-      [attr.aria-invalid]="invalid() && touched() ? 'true' : null"
+      [attr.aria-invalid]="invalid() && (touched() || dirty()) ? 'true' : null"
       [attr.aria-describedby]="describedBy() ?? null"
       [attr.aria-required]="required() ? 'true' : null"
       [placeholder]="placeholder()"
@@ -2494,7 +2568,7 @@ i0.ɵɵngDeclareClassMetadata({
       [attr.name]="name()"
       [attr.inputmode]="inputmode()"
       [attr.maxlength]="maxLength() ?? null"
-      [attr.aria-invalid]="invalid() && touched() ? 'true' : null"
+      [attr.aria-invalid]="invalid() && (touched() || dirty()) ? 'true' : null"
       [attr.aria-describedby]="describedBy() ?? null"
       [attr.aria-required]="required() ? 'true' : null"
       [placeholder]="placeholder()"
@@ -2568,6 +2642,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		dirty: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dirty",
+				required: false
+			}]
+		}],
 		required: [{
 			type: i0.Input,
 			args: [{
@@ -2972,6 +3054,7 @@ var SelectComponent = class SelectComponent {
 	readonly = input(false, ...ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []);
 	invalid = input(false, ...ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []);
 	touched = input(false, ...ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []);
+	dirty = input(false, ...ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []);
 	required = input(false, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
 	showClear = input(false, ...ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []);
 	filter = input(false, ...ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []);
@@ -3083,6 +3166,13 @@ var SelectComponent = class SelectComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			dirty: {
+				classPropertyName: "dirty",
+				publicName: "dirty",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			required: {
 				classPropertyName: "required",
 				publicName: "required",
@@ -3151,7 +3241,7 @@ var SelectComponent = class SelectComponent {
       [id]="inputId()"
       [attr.name]="name()"
       [attr.aria-labelledby]="ariaLabelledBy() ?? null"
-      [attr.aria-invalid]="invalid() && touched() ? 'true' : null"
+      [attr.aria-invalid]="invalid() && (touched() || dirty()) ? 'true' : null"
       [attr.aria-describedby]="describedBy() ?? null"
       [attr.aria-required]="required() ? 'true' : null"
       [attr.aria-readonly]="readonly() ? 'true' : null"
@@ -3197,7 +3287,7 @@ i0.ɵɵngDeclareClassMetadata({
       [id]="inputId()"
       [attr.name]="name()"
       [attr.aria-labelledby]="ariaLabelledBy() ?? null"
-      [attr.aria-invalid]="invalid() && touched() ? 'true' : null"
+      [attr.aria-invalid]="invalid() && (touched() || dirty()) ? 'true' : null"
       [attr.aria-describedby]="describedBy() ?? null"
       [attr.aria-required]="required() ? 'true' : null"
       [attr.aria-readonly]="readonly() ? 'true' : null"
@@ -3293,6 +3383,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		dirty: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dirty",
+				required: false
+			}]
+		}],
 		required: [{
 			type: i0.Input,
 			args: [{
@@ -3918,6 +4016,7 @@ var RecipeDefaultUiComponent = class RecipeDefaultUiComponent {
 					"readonly",
 					"invalid",
 					"touched",
+					"dirty",
 					"describedBy"
 				],
 				outputs: ["checkedChange", "touch"]
@@ -3934,6 +4033,7 @@ var RecipeDefaultUiComponent = class RecipeDefaultUiComponent {
 					"readonly",
 					"invalid",
 					"touched",
+					"dirty",
 					"required",
 					"describedBy"
 				],
@@ -3951,6 +4051,7 @@ var RecipeDefaultUiComponent = class RecipeDefaultUiComponent {
 					"readonly",
 					"invalid",
 					"touched",
+					"dirty",
 					"required",
 					"ariaLabel",
 					"describedBy",
@@ -3976,6 +4077,7 @@ var RecipeDefaultUiComponent = class RecipeDefaultUiComponent {
 					"readonly",
 					"invalid",
 					"touched",
+					"dirty",
 					"required",
 					"step",
 					"minFractionDigits",
@@ -3996,6 +4098,7 @@ var RecipeDefaultUiComponent = class RecipeDefaultUiComponent {
 					"readonly",
 					"invalid",
 					"touched",
+					"dirty",
 					"required",
 					"placeholder",
 					"inputmode",
@@ -4039,6 +4142,7 @@ var RecipeDefaultUiComponent = class RecipeDefaultUiComponent {
 					"readonly",
 					"invalid",
 					"touched",
+					"dirty",
 					"required",
 					"showClear",
 					"filter",
@@ -4580,7 +4684,7 @@ const RESERVED_KEYS = /* @__PURE__ */ new Set([
 ]);
 var RecipeMessages = class RecipeMessages {
 	static resolve(input) {
-		if (!input.touched && !input.submitted) return;
+		if (!input.touched && !input.dirty && !input.submitted) return;
 		const [first] = input.errors;
 		return first === void 0 ? void 0 : RecipeMessages.forError(first, input.fieldMessages, input.recipeMessages);
 	}
@@ -5016,12 +5120,16 @@ var RecipeSections = class RecipeSections {
 			if (state.hidden()) continue;
 			for (const error of state.errorSummary()) {
 				const errorState = error.fieldTree();
-				if (!errorState.hidden() && (errorState.touched() || input.submitted)) found.add(error.fieldTree);
+				const shown = errorState.touched() || errorState.dirty() || input.submitted;
+				if (!errorState.hidden() && shown) found.add(error.fieldTree);
 			}
 		}
 		for (const error of input.tree().errors()) if ("linkedId" in error && typeof error.linkedId === "string") {
 			const linkedKeys = error.linkedId.split("+");
-			if ((input.submitted || linkedKeys.every((key) => input.tree[key]?.().touched() === true)) && linkedKeys.every((key) => keys.has(key))) found.add(error.linkedId);
+			if ((input.submitted || linkedKeys.every((key) => {
+				const state = input.tree[key]?.();
+				return state !== void 0 && (state.touched() || state.dirty());
+			})) && linkedKeys.every((key) => keys.has(key))) found.add(error.linkedId);
 		}
 		for (const [path, key] of input.serverErrorKeys ?? []) if (keys.has(key)) found.add(`server:${path}`);
 		return found.size;
@@ -5365,6 +5473,7 @@ var RecipeFieldComponent = class RecipeFieldComponent {
 		return RecipeMessages.resolve({
 			errors: [...this.ownErrors(), ...server],
 			touched: this.state().touched() || server.length > 0,
+			dirty: this.state().dirty(),
 			submitted: this.context.submitted(),
 			fieldMessages: this.node().messages,
 			recipeMessages: this.context.recipeMessages()
@@ -5372,7 +5481,7 @@ var RecipeFieldComponent = class RecipeFieldComponent {
 	}, ...ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []);
 	warnings = computed(() => {
 		const state = this.state();
-		const ruleWarnings = state.touched() || this.context.submitted() ? state.metadata(FORM_WARNINGS)?.() ?? [] : [];
+		const ruleWarnings = state.touched() || state.dirty() || this.context.submitted() ? state.metadata(FORM_WARNINGS)?.() ?? [] : [];
 		const messages = RecipeMessages.forAll([...ruleWarnings, ...this.serverWarnings()], this.node().messages, this.context.recipeMessages());
 		return state.metadata(FORM_VALIDATION_UNAVAILABLE)?.() === true ? [...messages, { key: FORM_VALIDATION_UNAVAILABLE_MESSAGE }] : messages;
 	}, ...ngDevMode ? [{ debugName: "warnings" }] : /* istanbul ignore next */ []);
@@ -6454,10 +6563,11 @@ var RecipeNodeComponent = class RecipeNodeComponent {
 		const target = this.linkedTarget();
 		const source = target === void 0 ? this.tree()() : this.fieldTreeOf(target)();
 		const errors = source.errors().filter((error) => "linkedId" in error && error.linkedId === linkedId);
-		const touched = target === void 0 ? linked.keys.every((key) => this.fieldTreeOf(key)().touched()) : source.touched();
+		const states = target === void 0 ? linked.keys.map((key) => this.fieldTreeOf(key)()) : [source];
 		return RecipeMessages.resolve({
 			errors,
-			touched,
+			touched: states.every((state) => state.touched() || state.dirty()),
+			dirty: states.every((state) => state.dirty()),
 			submitted: this.context.submitted(),
 			fieldMessages: linked.messages,
 			recipeMessages: this.context.recipeMessages()
@@ -6501,6 +6611,7 @@ var RecipeNodeComponent = class RecipeNodeComponent {
 		return RecipeMessages.resolve({
 			errors: [...own, ...server],
 			touched: state.touched() || server.length > 0,
+			dirty: state.dirty(),
 			submitted: this.context.submitted(),
 			fieldMessages: array.messages,
 			recipeMessages: this.context.recipeMessages()