;
8 |
9 | beforeEach(waitForAsync(() => {
10 | return TestBed.configureTestingModule({
11 | imports: [RouterTestingModule],
12 | declarations: [AppComponent],
13 | schemas: [NO_ERRORS_SCHEMA]
14 | }).compileComponents();
15 | }));
16 |
17 | beforeEach(() => {
18 | fixture = TestBed.createComponent(AppComponent);
19 | fixture.detectChanges();
20 | });
21 |
22 | it("should create the app", () => {
23 | const app: AppComponent = fixture.debugElement.componentInstance;
24 | expect(app).toBeTruthy();
25 | });
26 |
27 | it("should render title in a h1 tag", () => {
28 | fixture.detectChanges();
29 | const compiled: HTMLElement = fixture.debugElement.nativeElement;
30 | const h1Element = compiled.querySelector("h1");
31 | expect(h1Element).toBeTruthy();
32 | // tslint:disable-next-line:no-non-null-assertion
33 | expect(h1Element!.textContent).toContain("Ngx-Form-Errors");
34 | });
35 | });
36 |
--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
1 | ## PR Checklist
2 |
3 | Please check if your PR fulfills the following requirements:
4 |
5 | - [ ] The commit message follows our guidelines: https://github.com/NationalBankBelgium/ngx-form-errors/blob/master/CONTRIBUTING.md#-commit-message-guidelines
6 | - [ ] Tests for the changes have been added (for bug fixes / features)
7 | - [ ] Docs have been added / updated (for bug fixes / features)
8 |
9 | ## PR Type
10 |
11 | What kind of change does this PR introduce?
12 |
13 |
14 |
15 | ```
16 | [ ] Bugfix
17 | [ ] Feature
18 | [ ] Code style update (formatting, local variables)
19 | [ ] Refactoring (no functional changes, no api changes)
20 | [ ] Build related changes
21 | [ ] CI related changes
22 | [ ] Documentation content changes
23 | [ ] Other... Please describe:
24 | ```
25 |
26 | ## What is the current behavior?
27 |
28 |
29 |
30 | Issue Number: N/A
31 |
32 | ## What is the new behavior?
33 |
34 | ## Does this PR introduce a breaking change?
35 |
36 | ```
37 | [ ] Yes
38 | [ ] No
39 | ```
40 |
41 |
42 |
43 | ## Other information
44 |
--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "version": 1,
4 | "newProjectRoot": "projects",
5 | "projects": {
6 | "ngx-form-errors": {
7 | "root": "",
8 | "sourceRoot": "src",
9 | "projectType": "library",
10 | "prefix": "ngx-form-errors",
11 | "architect": {
12 | "build": {
13 | "builder": "@angular-devkit/build-angular:ng-packagr",
14 | "options": {
15 | "tsConfig": "./tsconfig.lib.json",
16 | "project": "./ng-package.json"
17 | },
18 | "configurations": {
19 | "production": {
20 | "tsConfig": "tsconfig.lib.prod.json"
21 | }
22 | }
23 | },
24 | "test": {
25 | "builder": "@angular-devkit/build-angular:karma",
26 | "options": {
27 | "main": "./base.spec.ts",
28 | "tsConfig": "./tsconfig.spec.json",
29 | "karmaConfig": "./karma.conf.js"
30 | }
31 | },
32 | "lint": {
33 | "builder": "@angular-eslint/builder:lint",
34 | "options": {
35 | "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
36 | }
37 | }
38 | }
39 | }
40 | },
41 | "cli": {
42 | "schematicCollections": ["@angular-eslint/schematics"],
43 | "analytics": false
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/03-documentation.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: '📄 Documentation'
3 | about: Documentation issue or request
4 | title: ''
5 | labels: 'documentation'
6 | ---
7 |
8 | # 📄 Documentation
9 |
10 | ## Is this a regression?
11 |
12 |
13 |
14 | [ ] No
15 | [ ] Yes, the issue was not present in version: ...
16 |
17 |
18 | ## Current behavior
19 |
20 |
21 |
22 | ## Expected behavior
23 |
24 |
25 |
26 | ## What is the motivation / use case for changing the behavior?
27 |
28 |
29 |
30 | ## Environment
31 |
32 |
33 | Angular version: X.Y.Z
34 | NgxFormErrors version: X.Y.Z
35 |
36 |
37 | Browser:
38 | - [ ] Chrome (desktop) version XX
39 | - [ ] Chrome (Android) version XX
40 | - [ ] Chrome (iOS) version XX
41 | - [ ] Firefox version XX
42 | - [ ] Safari (desktop) version XX
43 | - [ ] Safari (iOS) version XX
44 | - [ ] IE version XX
45 | - [ ] Edge version XX
46 |
47 | For Tooling issues:
48 | - Node version: XX
49 | - Platform:
50 |
51 | Others:
52 |
53 |
54 |
--------------------------------------------------------------------------------
/demo-app/ng15/src/app/password-validator.ts:
--------------------------------------------------------------------------------
1 | import { AbstractControl, UntypedFormControl, UntypedFormGroup, ValidationErrors } from "@angular/forms";
2 | import { MatchingPassword } from "./pages";
3 |
4 | export class PasswordValidator {
5 | // Inspired on: http://plnkr.co/edit/Zcbg2T3tOxYmhxs7vaAm?p=preview
6 | public static areEqual(formGroup: UntypedFormGroup): ValidationErrors | null {
7 | let value: string | undefined;
8 | let valid = true;
9 | for (const key in formGroup.controls) {
10 | /* eslint-disable-next-line no-prototype-builtins */
11 | if (formGroup.controls.hasOwnProperty(key)) {
12 | const control: UntypedFormControl = formGroup.controls[key];
13 |
14 | if (value === undefined) {
15 | value = control.value;
16 | } else {
17 | if (value !== control.value) {
18 | valid = false;
19 | break;
20 | }
21 | }
22 | }
23 | }
24 |
25 | if (valid) {
26 | /* eslint-disable-next-line no-null/no-null */
27 | return null;
28 | }
29 |
30 | return {
31 | areEqual: true
32 | };
33 | }
34 |
35 | public static areEqualTyped(formGroup: AbstractControl): ValidationErrors | null {
36 | const matchingPassword = formGroup.value;
37 |
38 | if (matchingPassword.password === matchingPassword.confirmPassword) {
39 | /* eslint-disable-next-line no-null/no-null */
40 | return null;
41 | }
42 | return {
43 | areEqual: true
44 | };
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/demo-app/ng16/src/app/password-validator.ts:
--------------------------------------------------------------------------------
1 | import { AbstractControl, UntypedFormControl, UntypedFormGroup, ValidationErrors } from "@angular/forms";
2 | import { MatchingPassword } from "./pages";
3 |
4 | export class PasswordValidator {
5 | // Inspired on: http://plnkr.co/edit/Zcbg2T3tOxYmhxs7vaAm?p=preview
6 | public static areEqual(formGroup: UntypedFormGroup): ValidationErrors | null {
7 | let value: string | undefined;
8 | let valid = true;
9 | for (const key in formGroup.controls) {
10 | /* eslint-disable-next-line no-prototype-builtins */
11 | if (formGroup.controls.hasOwnProperty(key)) {
12 | const control: UntypedFormControl = formGroup.controls[key];
13 |
14 | if (value === undefined) {
15 | value = control.value;
16 | } else {
17 | if (value !== control.value) {
18 | valid = false;
19 | break;
20 | }
21 | }
22 | }
23 | }
24 |
25 | if (valid) {
26 | /* eslint-disable-next-line no-null/no-null */
27 | return null;
28 | }
29 |
30 | return {
31 | areEqual: true
32 | };
33 | }
34 |
35 | public static areEqualTyped(formGroup: AbstractControl): ValidationErrors | null {
36 | const matchingPassword = formGroup.value;
37 |
38 | if (matchingPassword.password === matchingPassword.confirmPassword) {
39 | /* eslint-disable-next-line no-null/no-null */
40 | return null;
41 | }
42 | return {
43 | areEqual: true
44 | };
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/01-bug.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: '🐛 Bug Report'
3 | about: Report a bug or regression
4 | title: ''
5 | labels: 'bug'
6 | ---
7 |
8 | # 🐛 Bug Report
9 |
10 | ## Is this a regression?
11 |
12 |
13 |
14 | [ ] No
15 | [ ] Yes, the bug was not present in version: ...
16 |
17 |
18 | ## Current behavior
19 |
20 |
21 |
22 | ## Expected behavior
23 |
24 |
25 |
26 | ## 🔬 Minimal reproduction of the problem with instructions
27 |
28 |
32 |
33 | ## Environment
34 |
35 |
36 | Angular version: X.Y.Z
37 | NgxFormErrors version: X.Y.Z
38 |
39 |
40 | Browser:
41 | - [ ] Chrome (desktop) version XX
42 | - [ ] Chrome (Android) version XX
43 | - [ ] Chrome (iOS) version XX
44 | - [ ] Firefox version XX
45 | - [ ] Safari (desktop) version XX
46 | - [ ] Safari (iOS) version XX
47 | - [ ] IE version XX
48 | - [ ] Edge version XX
49 |
50 | For Tooling issues:
51 | - Node version: XX
52 | - Platform:
53 |
54 | Others:
55 |
56 |
--------------------------------------------------------------------------------
/demo-app/ng15/src/app/pages/ngx-forms-example/ngx-forms-example.component.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | .grid {
4 | display: grid;
5 | grid-template-rows: auto;
6 | grid-template-columns: 1fr 1fr 1fr;
7 | grid-gap: 10px;
8 | }
9 |
10 | .form-card {
11 | grid-column-start: 1;
12 | grid-column-end: 4;
13 |
14 | mat-form-field {
15 | box-sizing: border-box;
16 | width: 100%;
17 |
18 | @media #{$monitor-query} {
19 | width: 45%;
20 | &:last-child {
21 | margin-left: 10%;
22 | }
23 | }
24 | }
25 |
26 | mat-card-actions {
27 | display: flex;
28 | align-items: flex-start;
29 | flex-wrap: wrap;
30 | margin: -10px;
31 |
32 | button {
33 | margin: 10px;
34 | @media #{$mobile-query} {
35 | width: 100%;
36 | }
37 | }
38 | }
39 | }
40 |
41 | .form-field-info {
42 | @media #{$table-query} {
43 | grid-column-start: 1;
44 | grid-column-end: 4;
45 | }
46 |
47 | mat-card-content {
48 | > div {
49 | padding: 5px 0;
50 | }
51 |
52 | pre {
53 | overflow: auto;
54 | box-sizing: border-box;
55 | display: block;
56 | width: 100%;
57 | max-height: 75px;
58 |
59 | margin: inherit;
60 | padding: 5px;
61 | border-radius: 4px;
62 |
63 | background-color: rgba(0, 0, 0, 0.2);
64 |
65 | &:empty {
66 | display: none;
67 | }
68 | }
69 | }
70 | }
71 |
72 | .form-validation-messages {
73 | grid-column-start: 1;
74 | grid-column-end: 4;
75 | }
76 |
--------------------------------------------------------------------------------
/demo-app/ng16/src/app/pages/ngx-forms-example/ngx-forms-example.component.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | .grid {
4 | display: grid;
5 | grid-template-rows: auto;
6 | grid-template-columns: 1fr 1fr 1fr;
7 | grid-gap: 10px;
8 | }
9 |
10 | .form-card {
11 | grid-column-start: 1;
12 | grid-column-end: 4;
13 |
14 | mat-form-field {
15 | box-sizing: border-box;
16 | width: 100%;
17 |
18 | @media #{$monitor-query} {
19 | width: 45%;
20 | &:last-child {
21 | margin-left: 10%;
22 | }
23 | }
24 | }
25 |
26 | mat-card-actions {
27 | display: flex;
28 | align-items: flex-start;
29 | flex-wrap: wrap;
30 | margin: -10px;
31 |
32 | button {
33 | margin: 10px;
34 | @media #{$mobile-query} {
35 | width: 100%;
36 | }
37 | }
38 | }
39 | }
40 |
41 | .form-field-info {
42 | @media #{$table-query} {
43 | grid-column-start: 1;
44 | grid-column-end: 4;
45 | }
46 |
47 | mat-card-content {
48 | > div {
49 | padding: 5px 0;
50 | }
51 |
52 | pre {
53 | overflow: auto;
54 | box-sizing: border-box;
55 | display: block;
56 | width: 100%;
57 | max-height: 75px;
58 |
59 | margin: inherit;
60 | padding: 5px;
61 | border-radius: 4px;
62 |
63 | background-color: rgba(0, 0, 0, 0.2);
64 |
65 | &:empty {
66 | display: none;
67 | }
68 | }
69 | }
70 | }
71 |
72 | .form-validation-messages {
73 | grid-column-start: 1;
74 | grid-column-end: 4;
75 | }
76 |
--------------------------------------------------------------------------------
/demo-app/ng15/src/app/pages/reactive-forms-example/reactive-forms-example.component.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | .grid {
4 | display: grid;
5 | grid-template-rows: auto;
6 | grid-template-columns: 1fr 1fr 1fr;
7 | grid-gap: 10px;
8 | }
9 |
10 | .form-card {
11 | grid-column-start: 1;
12 | grid-column-end: 4;
13 |
14 | mat-form-field {
15 | box-sizing: border-box;
16 | width: 100%;
17 |
18 | @media #{$monitor-query} {
19 | width: 45%;
20 | &:last-child {
21 | margin-left: 10%;
22 | }
23 | }
24 | }
25 |
26 | mat-card-actions {
27 | display: flex;
28 | align-items: flex-start;
29 | flex-wrap: wrap;
30 | margin: -10px;
31 |
32 | button {
33 | margin: 10px;
34 | @media #{$mobile-query} {
35 | width: 100%;
36 | }
37 | }
38 | }
39 | }
40 |
41 | .form-field-info {
42 | @media #{$table-query} {
43 | grid-column-start: 1;
44 | grid-column-end: 4;
45 | }
46 |
47 | mat-card-content {
48 | > div {
49 | padding: 5px 0;
50 | }
51 |
52 | pre {
53 | overflow: auto;
54 | box-sizing: border-box;
55 | display: block;
56 | width: 100%;
57 | max-height: 75px;
58 |
59 | margin: inherit;
60 | padding: 5px;
61 | border-radius: 4px;
62 |
63 | background-color: rgba(0, 0, 0, 0.2);
64 |
65 | &:empty {
66 | display: none;
67 | }
68 | }
69 | }
70 | }
71 |
72 | .form-validation-messages {
73 | grid-column-start: 1;
74 | grid-column-end: 4;
75 | }
76 |
--------------------------------------------------------------------------------
/demo-app/ng16/src/app/pages/reactive-forms-example/reactive-forms-example.component.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | .grid {
4 | display: grid;
5 | grid-template-rows: auto;
6 | grid-template-columns: 1fr 1fr 1fr;
7 | grid-gap: 10px;
8 | }
9 |
10 | .form-card {
11 | grid-column-start: 1;
12 | grid-column-end: 4;
13 |
14 | mat-form-field {
15 | box-sizing: border-box;
16 | width: 100%;
17 |
18 | @media #{$monitor-query} {
19 | width: 45%;
20 | &:last-child {
21 | margin-left: 10%;
22 | }
23 | }
24 | }
25 |
26 | mat-card-actions {
27 | display: flex;
28 | align-items: flex-start;
29 | flex-wrap: wrap;
30 | margin: -10px;
31 |
32 | button {
33 | margin: 10px;
34 | @media #{$mobile-query} {
35 | width: 100%;
36 | }
37 | }
38 | }
39 | }
40 |
41 | .form-field-info {
42 | @media #{$table-query} {
43 | grid-column-start: 1;
44 | grid-column-end: 4;
45 | }
46 |
47 | mat-card-content {
48 | > div {
49 | padding: 5px 0;
50 | }
51 |
52 | pre {
53 | overflow: auto;
54 | box-sizing: border-box;
55 | display: block;
56 | width: 100%;
57 | max-height: 75px;
58 |
59 | margin: inherit;
60 | padding: 5px;
61 | border-radius: 4px;
62 |
63 | background-color: rgba(0, 0, 0, 0.2);
64 |
65 | &:empty {
66 | display: none;
67 | }
68 | }
69 | }
70 | }
71 |
72 | .form-validation-messages {
73 | grid-column-start: 1;
74 | grid-column-end: 4;
75 | }
76 |
--------------------------------------------------------------------------------
/demo-app/ng15/src/app/pages/template-driven-forms-example/template-driven-forms-example.component.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | .grid {
4 | display: grid;
5 | grid-template-rows: auto;
6 | grid-template-columns: 1fr 1fr 1fr;
7 | grid-gap: 10px;
8 | }
9 |
10 | .form-card {
11 | grid-column-start: 1;
12 | grid-column-end: 4;
13 |
14 | mat-form-field {
15 | box-sizing: border-box;
16 | width: 100%;
17 |
18 | @media #{$monitor-query} {
19 | width: 45%;
20 | &:last-child {
21 | margin-left: 10%;
22 | }
23 | }
24 | }
25 |
26 | mat-card-actions {
27 | display: flex;
28 | align-items: flex-start;
29 | flex-wrap: wrap;
30 | margin: -10px;
31 |
32 | button {
33 | margin: 10px;
34 | @media #{$mobile-query} {
35 | width: 100%;
36 | }
37 | }
38 | }
39 | }
40 |
41 | .form-field-info {
42 | @media #{$table-query} {
43 | grid-column-start: 1;
44 | grid-column-end: 4;
45 | }
46 |
47 | mat-card-content {
48 | > div {
49 | padding: 5px 0;
50 | }
51 |
52 | pre {
53 | overflow: auto;
54 | box-sizing: border-box;
55 | display: block;
56 | width: 100%;
57 | max-height: 75px;
58 |
59 | margin: inherit;
60 | padding: 5px;
61 | border-radius: 4px;
62 |
63 | background-color: rgba(0, 0, 0, 0.2);
64 |
65 | &:empty {
66 | display: none;
67 | }
68 | }
69 | }
70 | }
71 |
72 | .form-validation-messages {
73 | grid-column-start: 1;
74 | grid-column-end: 4;
75 | }
76 |
--------------------------------------------------------------------------------
/demo-app/ng15/src/app/pages/typed-reactive-forms-example/typed-reactive-forms-example.component.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | .grid {
4 | display: grid;
5 | grid-template-rows: auto;
6 | grid-template-columns: 1fr 1fr 1fr;
7 | grid-gap: 10px;
8 | }
9 |
10 | .form-card {
11 | grid-column-start: 1;
12 | grid-column-end: 4;
13 |
14 | mat-form-field {
15 | box-sizing: border-box;
16 | width: 100%;
17 |
18 | @media #{$monitor-query} {
19 | width: 45%;
20 | &:last-child {
21 | margin-left: 10%;
22 | }
23 | }
24 | }
25 |
26 | mat-card-actions {
27 | display: flex;
28 | align-items: flex-start;
29 | flex-wrap: wrap;
30 | margin: -10px;
31 |
32 | button {
33 | margin: 10px;
34 | @media #{$mobile-query} {
35 | width: 100%;
36 | }
37 | }
38 | }
39 | }
40 |
41 | .form-field-info {
42 | @media #{$table-query} {
43 | grid-column-start: 1;
44 | grid-column-end: 4;
45 | }
46 |
47 | mat-card-content {
48 | > div {
49 | padding: 5px 0;
50 | }
51 |
52 | pre {
53 | overflow: auto;
54 | box-sizing: border-box;
55 | display: block;
56 | width: 100%;
57 | max-height: 75px;
58 |
59 | margin: inherit;
60 | padding: 5px;
61 | border-radius: 4px;
62 |
63 | background-color: rgba(0, 0, 0, 0.2);
64 |
65 | &:empty {
66 | display: none;
67 | }
68 | }
69 | }
70 | }
71 |
72 | .form-validation-messages {
73 | grid-column-start: 1;
74 | grid-column-end: 4;
75 | }
76 |
--------------------------------------------------------------------------------
/demo-app/ng16/src/app/pages/template-driven-forms-example/template-driven-forms-example.component.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | .grid {
4 | display: grid;
5 | grid-template-rows: auto;
6 | grid-template-columns: 1fr 1fr 1fr;
7 | grid-gap: 10px;
8 | }
9 |
10 | .form-card {
11 | grid-column-start: 1;
12 | grid-column-end: 4;
13 |
14 | mat-form-field {
15 | box-sizing: border-box;
16 | width: 100%;
17 |
18 | @media #{$monitor-query} {
19 | width: 45%;
20 | &:last-child {
21 | margin-left: 10%;
22 | }
23 | }
24 | }
25 |
26 | mat-card-actions {
27 | display: flex;
28 | align-items: flex-start;
29 | flex-wrap: wrap;
30 | margin: -10px;
31 |
32 | button {
33 | margin: 10px;
34 | @media #{$mobile-query} {
35 | width: 100%;
36 | }
37 | }
38 | }
39 | }
40 |
41 | .form-field-info {
42 | @media #{$table-query} {
43 | grid-column-start: 1;
44 | grid-column-end: 4;
45 | }
46 |
47 | mat-card-content {
48 | > div {
49 | padding: 5px 0;
50 | }
51 |
52 | pre {
53 | overflow: auto;
54 | box-sizing: border-box;
55 | display: block;
56 | width: 100%;
57 | max-height: 75px;
58 |
59 | margin: inherit;
60 | padding: 5px;
61 | border-radius: 4px;
62 |
63 | background-color: rgba(0, 0, 0, 0.2);
64 |
65 | &:empty {
66 | display: none;
67 | }
68 | }
69 | }
70 | }
71 |
72 | .form-validation-messages {
73 | grid-column-start: 1;
74 | grid-column-end: 4;
75 | }
76 |
--------------------------------------------------------------------------------
/demo-app/ng16/src/app/pages/typed-reactive-forms-example/typed-reactive-forms-example.component.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | .grid {
4 | display: grid;
5 | grid-template-rows: auto;
6 | grid-template-columns: 1fr 1fr 1fr;
7 | grid-gap: 10px;
8 | }
9 |
10 | .form-card {
11 | grid-column-start: 1;
12 | grid-column-end: 4;
13 |
14 | mat-form-field {
15 | box-sizing: border-box;
16 | width: 100%;
17 |
18 | @media #{$monitor-query} {
19 | width: 45%;
20 | &:last-child {
21 | margin-left: 10%;
22 | }
23 | }
24 | }
25 |
26 | mat-card-actions {
27 | display: flex;
28 | align-items: flex-start;
29 | flex-wrap: wrap;
30 | margin: -10px;
31 |
32 | button {
33 | margin: 10px;
34 | @media #{$mobile-query} {
35 | width: 100%;
36 | }
37 | }
38 | }
39 | }
40 |
41 | .form-field-info {
42 | @media #{$table-query} {
43 | grid-column-start: 1;
44 | grid-column-end: 4;
45 | }
46 |
47 | mat-card-content {
48 | > div {
49 | padding: 5px 0;
50 | }
51 |
52 | pre {
53 | overflow: auto;
54 | box-sizing: border-box;
55 | display: block;
56 | width: 100%;
57 | max-height: 75px;
58 |
59 | margin: inherit;
60 | padding: 5px;
61 | border-radius: 4px;
62 |
63 | background-color: rgba(0, 0, 0, 0.2);
64 |
65 | &:empty {
66 | display: none;
67 | }
68 | }
69 | }
70 | }
71 |
72 | .form-validation-messages {
73 | grid-column-start: 1;
74 | grid-column-end: 4;
75 | }
76 |
--------------------------------------------------------------------------------
/src/directives/form-errors-group.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, Input, OnInit } from "@angular/core";
2 |
3 | /**
4 | * Directive that defines the group of the form model to be validated.
5 | * The directive exposes the group through the controller to allow access to it by wrapped {@link NgxFormErrorsDirective}(s).
6 | */
7 | @Directive({
8 | selector: "[ngxFormErrorsGroup]"
9 | })
10 | export class NgxFormErrorsGroupDirective implements OnInit {
11 | /**
12 | * The group of the form model
13 | */
14 | @Input("ngxFormErrorsGroup")
15 | public set group(value: string) {
16 | this._formErrorsGroup = value;
17 | }
18 |
19 | public get group(): string {
20 | return this._formErrorsGroup;
21 | }
22 |
23 | /**
24 | * @ignore
25 | */
26 | private _formErrorsGroup!: string;
27 |
28 | /**
29 | * Class constructor
30 | */
31 | // eslint-disable-next-line @typescript-eslint/no-useless-constructor
32 | public constructor() {
33 | // TODO: how to prevent multiple ngxFormErrorsGroup on the same