@sbcore/ng-absolute-validator 14.0.1 → 14.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/README.md +243 -257
  2. package/esm2020/i18n/ar.mjs +68 -0
  3. package/esm2020/i18n/index.mjs +12 -0
  4. package/esm2020/lib/common.utils.mjs +12 -1
  5. package/esm2020/lib/config-interface.mjs +1 -1
  6. package/esm2020/lib/constant.mjs +2 -2
  7. package/esm2020/lib/directive/error-trigger/error-trigger-on.directive.mjs +1 -1
  8. package/esm2020/lib/interface.mjs +2 -14
  9. package/esm2020/lib/lang.config.mjs +26 -0
  10. package/esm2020/lib/ng-absolute-validator.component.mjs +5 -3
  11. package/esm2020/lib/ng-absolute-validator.module.mjs +10 -22
  12. package/esm2020/lib/ng-absolute-validator.service.mjs +14 -6
  13. package/esm2020/lib/pipe/index.mjs +2 -0
  14. package/esm2020/lib/pipe/replaceWith/replace-with.pipe.mjs +17 -0
  15. package/esm2020/lib/services/http.request.service.mjs +4 -3
  16. package/esm2020/lib/services/messages-builder.service.mjs +30 -33
  17. package/esm2020/lib/services/reactive.validate.mjs +4 -3
  18. package/esm2020/lib/services/utils.service.mjs +4 -3
  19. package/esm2020/lib/services/validate-rule.service.mjs +15 -10
  20. package/esm2020/lib/transator.loader.mjs +35 -24
  21. package/esm2020/public-api.mjs +2 -1
  22. package/fesm2015/sbcore-ng-absolute-validator.mjs +213 -97
  23. package/fesm2015/sbcore-ng-absolute-validator.mjs.map +1 -1
  24. package/fesm2020/sbcore-ng-absolute-validator.mjs +212 -99
  25. package/fesm2020/sbcore-ng-absolute-validator.mjs.map +1 -1
  26. package/i18n/ar.d.ts +68 -0
  27. package/i18n/index.d.ts +11 -0
  28. package/lib/common.utils.d.ts +4 -0
  29. package/lib/config-interface.d.ts +1 -2
  30. package/lib/constant.d.ts +1 -1
  31. package/lib/interface.d.ts +7 -3
  32. package/lib/lang.config.d.ts +1 -0
  33. package/lib/ng-absolute-validator.module.d.ts +6 -9
  34. package/lib/ng-absolute-validator.service.d.ts +8 -3
  35. package/lib/pipe/index.d.ts +1 -0
  36. package/lib/pipe/replaceWith/replace-with.pipe.d.ts +7 -0
  37. package/lib/services/messages-builder.service.d.ts +5 -3
  38. package/lib/services/validate-rule.service.d.ts +4 -2
  39. package/lib/transator.loader.d.ts +5 -3
  40. package/package.json +2 -2
  41. package/public-api.d.ts +1 -0
package/README.md CHANGED
@@ -1,257 +1,243 @@
1
- # Angular Absolute Validator
2
- Like no other form validation library, simply write in English your requirements inside your form HTML tags, Absolute Validator will do the rest.
3
-
4
- > **Package renamed:** this library was previously published as `ng-absolute-validator`. It now lives at **`@sbdev/ng-absolute-validator`** — update your install command and imports to the new scoped name below. The old package name is deprecated and will no longer receive updates; existing installs keep working, but new features (including everything in this release) are only published under the new name.
5
-
6
- ## New Features
7
- * Package renamed from `ng-absolute-validator` to `@sbdev/ng-absolute-validator` ([see above](#angular-absolute-validator)).
8
- * New `showErrorOn` input — choose which state(s) (`touched`, `dirty`, `submit`, `always`) trigger the error display, combinable as an array.
9
- * New `disableDefaultError` input — turn off the library's built-in error rendering for a field so you can build fully custom error UI off the `errorMessages` output instead.
10
- * New `errorMessages` output — emits the full list of raw validation error messages for a control, not just the rendered inline message.
11
- * Add error messages with multi-language support ([see below](#multi-language-error-messages)).
12
- * Set a fallback language for an empty main message.
13
- * Add the language and message object at the application root.
14
- * Add an inline error message with multi-language support.
15
- * No need to add a field name for reactive validation.
16
-
17
- ## Dependencies
18
- This library requires [`date-fns`](https://www.npmjs.com/package/date-fns) to be installed.
19
-
20
- ## Documentation
21
- Go to [Full Documentation](http://package.sbdeveloper.in/docs/ng-absolute-form-validator/14.0)
22
-
23
- ## Installation
24
-
25
- To install this library, run:
26
- ```bash
27
- $ npm install @sbdev/ng-absolute-validator@14
28
- ```
29
-
30
- > Upgrading from the old package? Uninstall the deprecated name first: `npm uninstall ng-absolute-validator`, then install `@sbdev/ng-absolute-validator` as above and update every import in your project to match (see below).
31
-
32
- Import `FormsModule`, `ReactiveFormsModule` and `NgAbsoluteValidatorModule` in your Angular `AppModule`. `FormsModule` is required for template-driven forms, `ReactiveFormsModule` is required for reactive forms (see the examples below) — import both if your app uses either style.
33
-
34
- ```typescript
35
- import { BrowserModule } from '@angular/platform-browser';
36
- import { NgModule } from '@angular/core';
37
- import { FormsModule, ReactiveFormsModule } from '@angular/forms';
38
- import { AppComponent } from './app.component';
39
- import { NgAbsoluteValidatorModule } from '@sbdev/ng-absolute-validator';
40
-
41
- @NgModule({
42
- declarations: [
43
- AppComponent
44
- ],
45
- imports: [
46
- BrowserModule,
47
- FormsModule,
48
- ReactiveFormsModule,
49
- NgAbsoluteValidatorModule
50
- ],
51
- providers: [],
52
- bootstrap: [AppComponent]
53
- })
54
- export class AppModule { }
55
- ```
56
-
57
- ## Multi-language Error Messages
58
-
59
- `NgAbsoluteValidatorModule` can render validation messages in more than one language: a project-wide message set is registered once at the application root, with a fallback language for anything not translated, and any single field can override or extend that message set inline.
60
-
61
- > **Note:** the exact shape below (`forRoot()`, and the `language` / `fallbackLanguage` / `messages` property names) reflects the `forRoot()`-based pattern — double check the property names against your actual module source before publishing, since a couple of small naming details weren't confirmed against the real implementation.
62
-
63
- ### Registering languages at the application root
64
-
65
- Pass your message object and the active language to `forRoot()` when importing the module in `AppModule`:
66
-
67
- ```typescript
68
- import { NgModule } from '@angular/core';
69
- import { NgAbsoluteValidatorModule } from '@sbdev/ng-absolute-validator';
70
-
71
- @NgModule({
72
- imports: [
73
- NgAbsoluteValidatorModule.forRoot({
74
- language: 'en',
75
- fallbackLanguage: 'en',
76
- messages: {
77
- en: {
78
- required: 'The :attribute field is required.',
79
- email: 'The :attribute must be a valid email address.',
80
- above: 'The :attribute should be above :arg0.'
81
- },
82
- ar: {
83
- required: 'حقل :attribute مطلوب.',
84
- email: 'يجب أن يكون :attribute بريدًا إلكترونيًا صالحًا.'
85
- // "above" is intentionally left untranslated here --
86
- // see "Falling back to a default language" below
87
- }
88
- }
89
- })
90
- ]
91
- })
92
- export class AppModule { }
93
- ```
94
-
95
- ### Falling back to a default language
96
-
97
- If the active `language` has no message defined for a rule that fails, the library looks it up in `fallbackLanguage` instead of showing a blank or missing message. In the example above, an Arabic-language user who fails the `above` rule sees the English fallback message, since the `ar` message set never defines one for `above`.
98
-
99
- ### Inline, per-field message overrides
100
-
101
- A single field can override — or add — messages without touching the root configuration, by passing a message object as the second argument to `rv.map()`. It only affects that field:
102
-
103
- ```typescript
104
- public aboveMessage: any = {
105
- en: { above: 'The :attribute should be above :arg0.' },
106
- ar: { above: 'ال :attribute يجب أن يكون أعلاه :arg0.' }
107
- }
108
-
109
- public formRules = {
110
- above: ['', this.rv.map('above:20', this.aboveMessage)],
111
- // ...
112
- }
113
- ```
114
-
115
- Use this when one field needs custom wording that shouldn't apply to every other field using the same rule elsewhere in the app.
116
-
117
- ## Add CSS Style for color effect on validation
118
- Add CSS style to application style.css file to get color effect on validation.
119
-
120
- ```css
121
- .ng-invalid:not(form):not(.ng-untouched){
122
- border: 1px solid red;
123
- }
124
- .ng-valid:not(form){
125
- border: 1px solid green;
126
- }
127
- ```
128
- ## Template driven form validation Example
129
- Once your library is imported, you can use the validation display message component and directive to activate the validation process.
130
-
131
- ```html
132
- <!-- For directive use, with no chain rules -->
133
- <form (ngSubmit)="onSubmit(form)" #form="ngForm">
134
- <input type="text" name="<name>" [(ngModel)]="<name>" #<name>="ngModel">
135
- <ng-absolute-validator [formInstance]="<name>" (onValid)="getStatus($event)"></ng-absolute-validator>
136
- </form>
137
-
138
- <!-- For Chain validation -->
139
- <form (ngSubmit)="onSubmit(form)" #form="ngForm">
140
- <input rule="required|integer|above:20" type="text" name="<name>" [(ngModel)]="<name>" #<name>="ngModel">
141
- <ng-absolute-validator [formInstance]="<name>" (onValid)="getStatus($event)"></ng-absolute-validator>
142
- </form>
143
- ```
144
-
145
- ## Reactive form validation Example
146
-
147
- ```typescript
148
- import { Component } from '@angular/core';
149
- import { ReactiveValidator } from '@package/services/reactive.validate';
150
- import { FormBuilder, FormGroup } from '@angular/forms';
151
-
152
- @Component({
153
- selector: 'app-reactive',
154
- templateUrl: './reactive.component.html',
155
- styleUrls: ['./reactive.component.css']
156
- })
157
- export class ReactiveComponent {
158
-
159
- public form: FormGroup;
160
- public formRules: { [key: string]: any };
161
-
162
- public aboveMessage: any = {
163
- en: { above: 'The :attribute should be above :arg0.' },
164
- ar: { above: 'ال :attribute يجب أن يكون أعلاه :arg0.' }
165
- }
166
-
167
- constructor(
168
- private fb: FormBuilder,
169
- private rv: ReactiveValidator,
170
- ) {
171
- // build formRules here, inside the constructor -- fb/rv are only
172
- // guaranteed to be assigned once the constructor body runs, so
173
- // referencing them in a field initializer above the constructor
174
- // can fail to compile under stricter tsconfig targets (TS2729).
175
- this.formRules = {
176
- above: ['', this.rv.map('above:20', this.aboveMessage)],
177
- dimension: ['',
178
- this.rv.map('image'),
179
- this.rv.dimension('width=200px,height=200px')
180
- ],
181
- email: ['',
182
- this.rv.map('email'),
183
- this.rv.unique({ url: 'http://jsonplaceholder.typicode.com/users' })
184
- ],
185
- }
186
-
187
- this.form = this.fb.group(this.formRules);
188
- }
189
- }
190
- ```
191
- ## Validation Rules
192
- All validation rules and error message details are given in the documentation: [Full Documentation](http://package.sbdeveloper.in/docs/ng-absolute-form-validator/14.0)
193
-
194
- The **Rule** column is the name used in code (e.g. as a `RuleValidatorsService` method); the **Usage** column is the exact string you write inside `rule="..."` or `rv.map('...')` — note that multi-word rules use `snake_case` there, not camelCase.
195
-
196
- | Rules | Usage | Description |
197
- | :--- | :--- | :--- |
198
- |`above`|`above:20`|Makes sure the value provided by the end user is above the expected value. This method will wrap<br>both the values|
199
- |`accepted`|`accepted`|Ensures that the field under validation is accepted. Empty strings, false, null, 0 and undefined<br>values will be considered as not accepted.|
200
- |`after`|`after:12-01-1991`|Ensures the value of the field is after the expected date.|
201
- |`alpha`|`alpha`|Makes sure the field under validation is alpha only.|
202
- |`alphaDash`|`alpha_dash`|Makes sure the field under validation is contain letters, numbers, dashes and underscores.|
203
- |`alphaNumeric`|`alpha_numeric`|Makes sure the field under validation is alpha numeric only.|
204
- |`array`|`array`|Ensure the value is a valid array. Also this validation will never validate the size of array.|
205
- |`before`|`before:12-01-1991`|Ensures the value of field under validation is before a given date.|
206
- |`between`|`between:5,10`|Ensures a numeric value falls strictly between the two given bounds, exclusive of both endpoints<br>(so `between:5,10` accepts 6-9 but rejects 5 and 10). Unlike `range`, the boundary values themselves<br>are not accepted.|
207
- |`boolean`|`boolean`|Ensures the value of a field is a boolean. Also it will cast following strings to their boolean<br>counter parts.|
208
- |`confirmed`|`confirmed`|Ensures a field value as confirmed using a _confirmation convention. This is mainly used for<br>password confirmation field.<br>For example: If the password field name is password, then another field called password_confirmation<br>must exist and should have the same value as the actual field.|
209
- |`creditCard`|`credit_card`|Ensures a field value must be a valid credit card number.|
210
- |`cvv`|`cvv`|Ensures a field value must be a CVV number.|
211
- |`date`|`date`|Ensures the field under validation is a valid date. The value can be a date object or a valid date<br>string.|
212
- |`dateFormat`|`date_format:DD-MM-YYYY`|Ensures the date or date time is valid as the one of the defined formats.|
213
- |`debitCard`|`debit_card`|Ensures a field value must be a valid debit card number.|
214
- |`different`|`different:other_field`|Ensures the value of the field under validation is always different from the targeted field value.|
215
- |`dimension`|`rv.dimension('width=200px,height=200px')`|Ensures the The file under validation must be an image meeting the dimension constraints as<br>specified by the accppeted params like: height=200,max_height=200,width=200,max_width=200,ratio=1.2. Passed as its own call, not inside the `rule` chain — see the reactive form example above.|
216
- |`email`|`email`|Ensures the field under validation is a valid email format.|
217
- |`endsWith`|`ends_with:a,b`|Ensure the value of field under validation ends with a certain substr. This validation will also<br>trim whitespaces before making the check|
218
- |`equals`|`equals:a`|Ensures the value of the field under validation exactly matches the given value.|
219
- |`exists`|`rv.exists({url:'...'})`|Ensures the value exists in the database. Only <b>GET</b> and <b>POST</b> methods are<br>allowed for remote validation; the default method is <b>GET</b>. Passed as its own call, not inside the `rule` chain.|
220
- |`image`|`image`|Ensures the upload file is an valid image file|
221
- |`in`|`in:a,b`|Ensures the value of a given field matches one of expected values.|
222
- |`includes`|`includes:abcd,efgh`|Ensures the value of field under validation contains a given substring.|
223
- |`integer`|`integer`|Ensures the value is a valid integer. Also string representation of a number will return true.|
224
- |`ip`|`ip`|Ensures the value is a valid ip address as per ipv4 and ipv6 specs.|
225
- |`ipv4`|`ipv4`|Ensures the value is a valid ip address as per ipv4 spec only.|
226
- |`ipv6`|`ipv6`|Ensures the value is a valid ip address as per ipv6 spec only.|
227
- |`json`|`json`|Ensures the value of field under validation is safe to be parsed using JSON.parse method.|
228
- |`max`|`max:10`|Ensures the length of a string or array or number is not greater than the defined length.|
229
- |`min`|`min:10`|Ensures the length of a string or array or number is not is not less than the expected length|
230
- |`mimes`|`mimes:png,jpg`|Ensures the file must have a MIME type corresponding to one of the listed extensions.|
231
- |`notEquals`|`not_equals:10`|Makes sure that the value of field under validation is not same as the defined value.|
232
- |`notIn`|`not_in:a,b,c`|Makes sure that the value of field under validation is not from one of the defined values.|
233
- |`notRegex`|`not_regex:(?=.*[0-9])`|Ensures the value of field under validation, passes the regex test. The regex can be defined as a<br>string or a RegExp object.|
234
- |`number`|`number`|Makes sure that the value of field under validation is a valid number. The validation will pass for<br>floats too, since it uses typeof internally.|
235
- |`phoneNo`|`phone_no`|Makes sure that the value of field under validation is a valid phone number. In default phone number<br>is validate more than 10 Style of number.To override the default behaviour pass new regex expression<br>to validate the number.|
236
- |`range`|`range:5,10`|Ensures the value of field under validation is under a given range. The values will be cased to<br>Number automatically.|
237
- |`regex`|`regex:(?=.*[0-9])`|Ensures the value of field under validation, passes the regex test. The regex can be defined as a<br>string or a RegExp object.|
238
- |`required`|`required`|Ensures the value of field under validation is not empty.|
239
- |`requiredIf`|`required_if:field,value`|Ensures the field under validation must be present and not empty if the anotherfield field is equal<br>to any value. The Match with field must be define or initialized or placed before validated field.|
240
- |`requiredUnless`|`required_unless:field,value`|Ensures the field under validation must be present and not empty unless the anotherfield field is<br>equal to any value. The Match with fields must be define or initialized or placed before validated<br>field.|
241
- |`requiredWith`|`required_with:field1,field2`|Ensure The field under validation must be present and not empty only if any of the other specified<br>fields are present. The Match with fields must be define or initialized or placed before validated<br>field.|
242
- |`requiredWithAll`|`required_with_all:field1,field2`|Ensure The field under validation must be present and not empty only if all of the other specified<br>fields are present. The Match with fields must be define or initialized or placed before validated<br>field.|
243
- |`requiredWithout`|`required_without:field1,field2`|Ensure The field under validation must be present and not empty only when any of the other specified<br>fields are not present. The Match with fields must be define or initialized or placed before<br>validated field.|
244
- |`requiredWithoutAll`|`required_without_all:field1,field2`|Ensure The field under validation must be present and not empty only when all of the other specified<br>fields are not present. The Match with fields must be define or initialized or placed before<br>validated field.|
245
- |`same`|`same:other_field`|Ensures the value of 2 fields are same.|
246
- |`size`|`size:120`|Ensures the size of the file not more than the specific size (in KB).|
247
- |`startsWith`|`starts_with:a,b`|Ensures the value of 2 fields are same.|
248
- |`string`|`string`|Ensures the value is a string.|
249
- |`strength`|`strength`| Make sure the value strength should mach pre defined regex expression.<br><br> Add or overide with new regex expression from root config.<br> Add or modify progess bar color combination from root config.<br> <ul> <b>a</b> : String must be 8 charecter long.<br> <b>b</b> : String must contain one uppercase letter.<br> <b>c</b> : String must contain one spatial charecter.<br> <b>d</b> : String must contain one digit.<br> <b>b</b> : String must contain one lowecase letter.<br> </ul> |
250
- |`under`|`under:10`|Ensures the value of a field is under a certain value. All values will be casted to Number|
251
- |`url`|`url`|Ensures the value is a valid URL format.|
252
- |`uuid`|`uuid`|Ensures the value is a valid UUID format.|
253
- |`unique`|`rv.unique({url:'...'})`|Ensures the value is unique in the database. Only <b>GET</b> and <b>POST</b> methods are<br>allowed for remote validation; the default method is <b>GET</b>. Passed as its own call, not inside the `rule` chain.|
254
- |`video`|`video`|Ensures the upload file is an valid video file|
255
-
256
- ## License
257
- This project is licensed under the terms of the MIT license.
1
+ # Angular Absolute Validator
2
+ Like no other form validation library, simply write in English your requirements inside your form HTML tags, Absolute Validator will do the rest.
3
+
4
+ > **Package renamed:** this library was previously published as `ng-absolute-validator`. It now lives at **`@sbcore/ng-absolute-validator`** — update your install command and imports to the new scoped name below. The old package name is deprecated and will no longer receive updates; existing installs keep working, but new features (including everything in this release) are only published under the new name.
5
+
6
+ ## New Features
7
+ * Language system simplified and improved — translation loading and merging are more robust, and easier to extend or override.
8
+ * Seamless integration with your own translations — `ng-absolute-validator` now automatically merges its language data into your existing TranslateService instance, so you can bring your own translation setup as-is, with no extra configuration required.
9
+ * `fallbackLanguage` removed — `defaultLanguage` now serves as the fallback when a translation key is missing, so there's no need to configure both separately.
10
+ * `showErrorOn` introduced — control when validation errors appear (`touched`, `dirty`, `submit`, or `always`), configured globally.
11
+ * `showAllErrors` introduced — choose whether to show every failing rule at once or stop at the first invalid one.
12
+ * Validation error results now expose a richer object — `i18nKey`, `args`, `attr`, `message`, and `lang` — giving you full context (which rule failed, its arguments, the field name, the translated text, and the language it's in) instead of just a message string.
13
+
14
+ ## Documentation & Support
15
+ - Go to [Full Documentation](http://package.sbdeveloper.in/docs/ng-absolute-form-validator/14.1)
16
+ - Go to [For Support](https://package.sbdeveloper.in/support)
17
+
18
+ ## Installation
19
+
20
+ To install this library, run:
21
+ ```bash
22
+ $ npm install @sbcore/ng-absolute-validator@14.1
23
+ ```
24
+
25
+ > Upgrading from the old package? Uninstall the deprecated name first: `npm uninstall ng-absolute-validator`, then install `@sbcore/ng-absolute-validator` as above and update every import in your project to match (see below).
26
+
27
+ Import `FormsModule`, `ReactiveFormsModule` and `NgAbsoluteValidatorModule` in your Angular `AppModule`. `FormsModule` is required for template-driven forms, `ReactiveFormsModule` is required for reactive forms (see the examples below) — import both if your app uses either style.
28
+
29
+ ```typescript
30
+ import { BrowserModule } from '@angular/platform-browser';
31
+ import { NgModule } from '@angular/core';
32
+ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
33
+ import { AppComponent } from './app.component';
34
+ import { NgAbsoluteValidatorModule } from '@sbcore/ng-absolute-validator';
35
+
36
+ @NgModule({
37
+ declarations: [
38
+ AppComponent
39
+ ],
40
+ imports: [
41
+ BrowserModule,
42
+ FormsModule,
43
+ ReactiveFormsModule,
44
+ NgAbsoluteValidatorModule.forRoot({})
45
+ ],
46
+ providers: [],
47
+ bootstrap: [AppComponent]
48
+ })
49
+ export class AppModule { }
50
+ ```
51
+
52
+ ## Multi-language Error Messages
53
+
54
+ `NgAbsoluteValidatorModule` can render validation messages in more than one language: a project-wide message set is registered once at the application root, with a fallback language for anything not translated, and any single field can override or extend that message set inline.
55
+
56
+ ### Registering languages at the application root
57
+
58
+ Pass your message object and the active language to `forRoot()` when importing the module in `AppModule`:
59
+
60
+ ```typescript
61
+ import { NgModule } from '@angular/core';
62
+ import { NgAbsoluteValidatorModule } from '@sbcore/ng-absolute-validator';
63
+
64
+ @NgModule({
65
+ imports: [
66
+ NgAbsoluteValidatorModule.forRoot({
67
+ language: 'en',
68
+ defaultLanguage : 'en',
69
+ messages: {
70
+ en: {
71
+ required: 'The :attribute field is required.',
72
+ email: 'The :attribute must be a valid email address.',
73
+ above: 'The :attribute should be above :arg0.'
74
+ },
75
+ ar: {
76
+ required: 'حقل :attribute مطلوب.',
77
+ email: 'يجب أن يكون :attribute بريدًا إلكترونيًا صالحًا.'
78
+ }
79
+ }
80
+ })
81
+ ]
82
+ })
83
+ export class AppModule { }
84
+ ```
85
+
86
+ ### Falling back to a default language
87
+
88
+ If the active `language` has no message defined for a rule that fails, the library looks it up in `defaultLanguage` instead of showing a blank or missing message. In the example above, an Arabic-language user who fails the `above` rule sees the English fallback message, since the `ar` message set never defines one for `above`.
89
+
90
+ ### Inline, per-field message overrides
91
+
92
+ A single field can override — or add — messages without touching the root configuration, by passing a message object as the second argument to `rv.map()`. It only affects that field:
93
+
94
+ ```typescript
95
+ public aboveMessage: any = {
96
+ en: { above: 'The :attribute should be above :arg0.' },
97
+ ar: { above: 'ال :attribute يجب أن يكون أعلاه :arg0.' }
98
+ }
99
+
100
+ public formRules = {
101
+ above: ['', this.rv.map('above:20', this.aboveMessage)],
102
+ // ...
103
+ }
104
+ ```
105
+
106
+ Use this when one field needs custom wording that shouldn't apply to every other field using the same rule elsewhere in the app.
107
+
108
+ ## Add CSS Style for color effect on validation
109
+ Add CSS style to application style.css file to get color effect on validation.
110
+
111
+ ```css
112
+ .ng-invalid:not(form):not(.ng-untouched){
113
+ border: 1px solid red;
114
+ }
115
+ .ng-valid:not(form){
116
+ border: 1px solid green;
117
+ }
118
+ ```
119
+ ## Template driven form validation Example
120
+ Once your library is imported, you can use the validation display message component and directive to activate the validation process.
121
+
122
+ ```html
123
+ <!-- For directive use, with no chain rules -->
124
+ <form (ngSubmit)="onSubmit(form)" #form="ngForm">
125
+ <input type="text" name="<name>" [(ngModel)]="<name>" #<name>="ngModel">
126
+ <ng-absolute-validator [formInstance]="<name>" (onValid)="getStatus($event)"></ng-absolute-validator>
127
+ </form>
128
+
129
+ <!-- For Chain validation -->
130
+ <form (ngSubmit)="onSubmit(form)" #form="ngForm">
131
+ <input rule="required|integer|above:20" type="text" name="<name>" [(ngModel)]="<name>" #<name>="ngModel">
132
+ <ng-absolute-validator [formInstance]="<name>" (onValid)="getStatus($event)"></ng-absolute-validator>
133
+ </form>
134
+ ```
135
+
136
+ ## Reactive form validation Example
137
+
138
+ ```typescript
139
+ import { Component } from '@angular/core';
140
+ import { ReactiveValidator } from '@sbcore/ng-absolute-validator';
141
+ import { FormBuilder, FormGroup } from '@angular/forms';
142
+
143
+ @Component({
144
+ selector: 'app-reactive',
145
+ templateUrl: './reactive.component.html',
146
+ styleUrls: ['./reactive.component.css']
147
+ })
148
+ export class ReactiveComponent {
149
+
150
+ public form: FormGroup;
151
+ public formRules: { [key: string]: any };
152
+
153
+ public aboveMessage: any = {
154
+ en: { above: 'The :attribute should be above :arg0.' },
155
+ ar: { above: 'ال :attribute يجب أن يكون أعلاه :arg0.' }
156
+ }
157
+
158
+ constructor(
159
+ private fb: FormBuilder,
160
+ private rv: ReactiveValidator,
161
+ ) {
162
+ this.formRules = {
163
+ above: ['', this.rv.map('above:20', this.aboveMessage)],
164
+ dimension: ['',
165
+ this.rv.map('image'),
166
+ this.rv.dimension('width=200px,height=200px')
167
+ ],
168
+ email: ['',
169
+ this.rv.map('email'),
170
+ this.rv.unique({ url: 'http://jsonplaceholder.typicode.com/users' })
171
+ ],
172
+ }
173
+ this.form = this.fb.group(this.formRules);
174
+ }
175
+ }
176
+ ```
177
+ ## Validation Rules
178
+ All validation rules and error message details are given in the documentation: [Full Documentation](http://package.sbdeveloper.in/docs/ng-absolute-form-validator/14.0)
179
+
180
+ The **Rule** column is the name of the validation rule. the **Usage** column is the exact string you write inside `rule="..."` or `rv.map('...')` — note that multi-word rules use `snake_case` there, not camelCase.
181
+
182
+ | Rules | Usage | Description |
183
+ | :--- | :--- | :--- |
184
+ |`above`|`above:20`|Makes sure the value provided by the end user is above the expected value. This method will wrap<br>both the values|
185
+ |`accepted`|`accepted`|Ensures that the field under validation is accepted. Empty strings, false, null, 0 and undefined<br>values will be considered as not accepted.|
186
+ |`after`|`after:12-01-1991`|Ensures the value of the field is after the expected date.|
187
+ |`alpha`|`alpha`|Makes sure the field under validation is alpha only.|
188
+ |`alphaDash`|`alpha_dash`|Makes sure the field under validation is contain letters, numbers, dashes and underscores.|
189
+ |`alphaNumeric`|`alpha_numeric`|Makes sure the field under validation is alpha numeric only.|
190
+ |`array`|`array`|Ensure the value is a valid array. Also this validation will never validate the size of array.|
191
+ |`before`|`before:12-01-1991`|Ensures the value of field under validation is before a given date.|
192
+ |`between`|`between:5,10`|Ensures a numeric value falls strictly between the two given bounds, exclusive of both endpoints<br>(so `between:5,10` accepts 6-9 but rejects 5 and 10). Unlike `range`, the boundary values themselves<br>are not accepted.|
193
+ |`boolean`|`boolean`|Ensures the value of a field is a boolean. Also it will cast following strings to their boolean<br>counter parts.|
194
+ |`confirmed`|`confirmed`|Ensures a field value as confirmed using a _confirmation convention. This is mainly used for<br>password confirmation field.<br>For example: If the password field name is password, then another field called password_confirmation<br>must exist and should have the same value as the actual field.|
195
+ |`creditCard`|`credit_card`|Ensures a field value must be a valid credit card number.|
196
+ |`cvv`|`cvv`|Ensures a field value must be a CVV number.|
197
+ |`date`|`date`|Ensures the field under validation is a valid date. The value can be a date object or a valid date<br>string.|
198
+ |`dateFormat`|`date_format:DD-MM-YYYY`|Ensures the date or date time is valid as the one of the defined formats.|
199
+ |`debitCard`|`debit_card`|Ensures a field value must be a valid debit card number.|
200
+ |`different`|`different:other_field`|Ensures the value of the field under validation is always different from the targeted field value.|
201
+ |`dimension`|`rv.dimension('width=200px,height=200px')`|Ensures the The file under validation must be an image meeting the dimension constraints as<br>specified by the accppeted params like: height=200,max_height=200,width=200,max_width=200,ratio=1.2. Passed as its own call, not inside the `rule` chain — see the reactive form example above.|
202
+ |`email`|`email`|Ensures the field under validation is a valid email format.|
203
+ |`endsWith`|`ends_with:a,b`|Ensure the value of field under validation ends with a certain substr. This validation will also<br>trim whitespaces before making the check|
204
+ |`equals`|`equals:a`|Ensures the value of the field under validation exactly matches the given value.|
205
+ |`exists`|`rv.exists({url:'...'})`|Ensures the value exists in the database. Only <b>GET</b> and <b>POST</b> methods are<br>allowed for remote validation; the default method is <b>GET</b>. Passed as its own call, not inside the `rule` chain.|
206
+ |`image`|`image`|Ensures the upload file is an valid image file|
207
+ |`in`|`in:a,b`|Ensures the value of a given field matches one of expected values.|
208
+ |`includes`|`includes:abcd,efgh`|Ensures the value of field under validation contains a given substring.|
209
+ |`integer`|`integer`|Ensures the value is a valid integer. Also string representation of a number will return true.|
210
+ |`ip`|`ip`|Ensures the value is a valid ip address as per ipv4 and ipv6 specs.|
211
+ |`ipv4`|`ipv4`|Ensures the value is a valid ip address as per ipv4 spec only.|
212
+ |`ipv6`|`ipv6`|Ensures the value is a valid ip address as per ipv6 spec only.|
213
+ |`json`|`json`|Ensures the value of field under validation is safe to be parsed using JSON.parse method.|
214
+ |`max`|`max:10`|Ensures the length of a string or array or number is not greater than the defined length.|
215
+ |`min`|`min:10`|Ensures the length of a string or array or number is not is not less than the expected length|
216
+ |`mimes`|`mimes:png,jpg`|Ensures the file must have a MIME type corresponding to one of the listed extensions.|
217
+ |`notEquals`|`not_equals:10`|Makes sure that the value of field under validation is not same as the defined value.|
218
+ |`notIn`|`not_in:a,b,c`|Makes sure that the value of field under validation is not from one of the defined values.|
219
+ |`notRegex`|`not_regex:(?=.*[0-9])`|Ensures the value of field under validation, passes the regex test. The regex can be defined as a<br>string or a RegExp object.|
220
+ |`number`|`number`|Makes sure that the value of field under validation is a valid number. The validation will pass for<br>floats too, since it uses typeof internally.|
221
+ |`phoneNo`|`phone_no`|Makes sure that the value of field under validation is a valid phone number. In default phone number<br>is validate more than 10 Style of number.To override the default behaviour pass new regex expression<br>to validate the number.|
222
+ |`range`|`range:5,10`|Ensures the value of field under validation is under a given range. The values will be cased to<br>Number automatically.|
223
+ |`regex`|`regex:(?=.*[0-9])`|Ensures the value of field under validation, passes the regex test. The regex can be defined as a<br>string or a RegExp object.|
224
+ |`required`|`required`|Ensures the value of field under validation is not empty.|
225
+ |`requiredIf`|`required_if:field,value`|Ensures the field under validation must be present and not empty if the anotherfield field is equal<br>to any value. The Match with field must be define or initialized or placed before validated field.|
226
+ |`requiredUnless`|`required_unless:field,value`|Ensures the field under validation must be present and not empty unless the anotherfield field is<br>equal to any value. The Match with fields must be define or initialized or placed before validated<br>field.|
227
+ |`requiredWith`|`required_with:field1,field2`|Ensure The field under validation must be present and not empty only if any of the other specified<br>fields are present. The Match with fields must be define or initialized or placed before validated<br>field.|
228
+ |`requiredWithAll`|`required_with_all:field1,field2`|Ensure The field under validation must be present and not empty only if all of the other specified<br>fields are present. The Match with fields must be define or initialized or placed before validated<br>field.|
229
+ |`requiredWithout`|`required_without:field1,field2`|Ensure The field under validation must be present and not empty only when any of the other specified<br>fields are not present. The Match with fields must be define or initialized or placed before<br>validated field.|
230
+ |`requiredWithoutAll`|`required_without_all:field1,field2`|Ensure The field under validation must be present and not empty only when all of the other specified<br>fields are not present. The Match with fields must be define or initialized or placed before<br>validated field.|
231
+ |`same`|`same:other_field`|Ensures the value of 2 fields are same.|
232
+ |`size`|`size:120`|Ensures the size of the file not more than the specific size (in KB).|
233
+ |`startsWith`|`starts_with:a,b`|Ensures the value of 2 fields are same.|
234
+ |`string`|`string`|Ensures the value is a string.|
235
+ |`strength`|`strength`| Make sure the value strength should mach pre defined regex expression.<br><br> Add or overide with new regex expression from root config.<br> Add or modify progess bar color combination from root config.<br> <ul> <b>a</b> : String must be 8 charecter long.<br> <b>b</b> : String must contain one uppercase letter.<br> <b>c</b> : String must contain one spatial charecter.<br> <b>d</b> : String must contain one digit.<br> <b>b</b> : String must contain one lowecase letter.<br> </ul> |
236
+ |`under`|`under:10`|Ensures the value of a field is under a certain value. All values will be casted to Number|
237
+ |`url`|`url`|Ensures the value is a valid URL format.|
238
+ |`uuid`|`uuid`|Ensures the value is a valid UUID format.|
239
+ |`unique`|`rv.unique({url:'...'})`|Ensures the value is unique in the database. Only <b>GET</b> and <b>POST</b> methods are<br>allowed for remote validation; the default method is <b>GET</b>. Passed as its own call, not inside the `rule` chain.|
240
+ |`video`|`video`|Ensures the upload file is an valid video file|
241
+
242
+ ## License
243
+ This project is licensed under the terms of the MIT license.