Skip to content

Commit 0835ea3

Browse files
authored
docs(forms): explain default validation messages (#88)
1 parent 170179e commit 0835ea3

1 file changed

Lines changed: 27 additions & 1 deletion

File tree

projects/kit/docs/forms.md

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,33 @@ import { KitIonicFormField } from '@rdlabo/ionic-angular-kit/forms';
1414
export class ProfilePage {}
1515
```
1616

17-
The adapter copies the first non-empty string validation message to Ionic's `errorText` property for `ion-input`, `ion-textarea`, `ion-select`, `ion-checkbox`, `ion-radio-group`, and `ion-toggle`. Validation wording and localization remain the application's responsibility. An explicit `errorText` or `[errorText]` binding takes precedence and prevents the adapter from being instantiated.
17+
The adapter copies the first non-empty explicit validation message to Ionic's `errorText` property for `ion-input`, `ion-textarea`, `ion-select`, `ion-checkbox`, `ion-radio-group`, and `ion-toggle`. When Angular's validator does not provide a message, the adapter derives a generic English message from the validation error `kind` and its constraint metadata. Built-in validators therefore need no message configuration:
18+
19+
```ts
20+
readonly profileForm = form(this.profile, (path) => {
21+
required(path.name);
22+
email(path.email);
23+
maxLength(path.name, 200);
24+
});
25+
```
26+
27+
Unknown custom error kinds fall back to `Enter a valid value.`. Keep business-rule failures outside field validation. An explicit validation message still takes precedence for compatibility, and an explicit `errorText` or `[errorText]` binding prevents the adapter from being instantiated.
28+
29+
Applications may replace the fallback resolver for localization without changing validator definitions:
30+
31+
```ts
32+
import type { ValidationError } from '@angular/forms/signals';
33+
import { KIT_SIGNAL_FORM_ERROR_MESSAGE_RESOLVER } from '@rdlabo/ionic-angular-kit/forms';
34+
35+
export const appConfig: ApplicationConfig = {
36+
providers: [
37+
{
38+
provide: KIT_SIGNAL_FORM_ERROR_MESSAGE_RESOLVER,
39+
useValue: (error: ValidationError) => localizedMessageFor(error),
40+
},
41+
],
42+
};
43+
```
1844

1945
Install the state-class configuration once at application bootstrap:
2046

0 commit comments

Comments
 (0)