Skip to content

Commit b1f67a6

Browse files
jafindavidwalschots
jafin
and
davidwalschots
authored
feat: update to angular 12 (#30)
* Run ng update to 12 * Update validation package dependencies * fix Validator example. * style demo with cirrus * align rxjs version to angular 12 (6.6.7) * task (ESLint): Migrate TSLint to ESLint * tidy: remove typings that are in @types/node * use node 14 * -fix ESlint warnings. -Fix gitignore, -set package-lock back to 12.0.0 -fix indenting on app.component * lint all project files * lint in pipeline * bump version * remove ban-types eslint disable Co-authored-by: David Walschots <davidwalschots@users.noreply.github.com>
1 parent e252e26 commit b1f67a6

26 files changed

+35136
-14346
lines changed

‎.eslintrc.json

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
{
2+
"root": true,
3+
"ignorePatterns": [
4+
"projects/**/*"
5+
],
6+
"overrides": [
7+
{
8+
"files": [
9+
"*.ts"
10+
],
11+
"parserOptions": {
12+
"project": [
13+
"tsconfig.json",
14+
"e2e/tsconfig.json"
15+
],
16+
"createDefaultProgram": true
17+
},
18+
"extends": [
19+
"plugin:@angular-eslint/ng-cli-compat",
20+
"plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
21+
"plugin:@angular-eslint/template/process-inline-templates"
22+
],
23+
"rules": {
24+
"@angular-eslint/component-selector": [
25+
"error",
26+
{
27+
"type": "element",
28+
"prefix": "arv",
29+
"style": "kebab-case"
30+
}
31+
],
32+
"@angular-eslint/directive-selector": [
33+
"error",
34+
{
35+
"type": "attribute",
36+
"prefix": "arv",
37+
"style": "camelCase"
38+
}
39+
],
40+
"@typescript-eslint/consistent-type-definitions": "error",
41+
"@typescript-eslint/dot-notation": "off",
42+
"@typescript-eslint/explicit-member-accessibility": [
43+
"off",
44+
{
45+
"accessibility": "explicit"
46+
}
47+
],
48+
"@typescript-eslint/unified-signatures": "off",
49+
"brace-style": [
50+
"error",
51+
"1tbs"
52+
],
53+
"id-blacklist": "off",
54+
"id-match": "off",
55+
"no-underscore-dangle": "off",
56+
"object-shorthand": "off"
57+
}
58+
},
59+
{
60+
"files": [
61+
"*.html"
62+
],
63+
"extends": [
64+
"plugin:@angular-eslint/template/recommended"
65+
],
66+
"rules": {}
67+
}
68+
]
69+
}

‎angular-reactive-validation/package.json

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "angular-reactive-validation",
33
"description": "Reactive Forms validation shouldn't require the developer to write lots of HTML to show validation messages. This library makes it easy.",
4-
"version": "5.0.0",
4+
"version": "6.0.0",
55
"repository": {
66
"type": "git",
77
"url": "https://github.com/davidwalschots/angular-reactive-validation.git"
@@ -20,18 +20,18 @@
2020
"private": false,
2121
"dependencies": {},
2222
"peerDependencies": {
23-
"@angular/core": "^11.0.0",
24-
"@angular/common": "^11.0.0",
25-
"@angular/forms": "^11.0.0",
26-
"rxjs": "^6.5.4"
23+
"@angular/core": "^12.0.0",
24+
"@angular/common": "^12.0.0",
25+
"@angular/forms": "^12.0.0",
26+
"rxjs": "^6.5.3"
2727
},
2828
"ngPackage": {
2929
"$schema": "./node_modules/ng-packagr/ng-package.schema.json",
3030
"dest": "../dist/angular-reactive-validation",
3131
"lib": {
3232
"entryFile": "src/public_api.ts"
3333
},
34-
"whitelistedNonPeerDependencies": [
34+
"allowedNonPeerDependencies": [
3535
"."
3636
]
3737
}

‎angular-reactive-validation/src/form/form.directive.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { FormGroupDirective } from '@angular/forms';
33
import { Observable } from 'rxjs';
44

55
@Directive({
6-
// tslint:disable-next-line:directive-selector
6+
// eslint-disable-next-line @angular-eslint/directive-selector
77
selector: 'form[formGroup]'
88
})
99
/**
@@ -13,7 +13,7 @@ export class FormDirective {
1313
/**
1414
* Observable which emits when the form is submitted.
1515
*/
16-
submitted: Observable<{}>;
16+
submitted: Observable<any>;
1717

1818
constructor(formGroupDirective: FormGroupDirective) {
1919
this.submitted = formGroupDirective.ngSubmit.asObservable();

‎angular-reactive-validation/src/get-control-path.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { AbstractControl } from '@angular/forms';
77
*
88
* Note that FormArray indexes are also put in the path, e.g.: 'person.0.name.firstName'.
99
*/
10-
export function getControlPath(control: AbstractControl): string {
10+
export const getControlPath = (control: AbstractControl): string => {
1111
const parentControl = control.parent;
1212
if (parentControl) {
1313
let path = getControlPath(parentControl);
@@ -25,4 +25,4 @@ export function getControlPath(control: AbstractControl): string {
2525
}
2626

2727
return '';
28-
}
28+
};

‎angular-reactive-validation/src/get-form-control-from-container.ts

+7-10
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { FormGroup, FormControl, ControlContainer, FormGroupDirective } from '@angular/forms';
22

3-
export function getFormControlFromContainer(name: string, controlContainer: ControlContainer | undefined): FormControl {
3+
export const getFormControlFromContainer = (name: string, controlContainer: ControlContainer | undefined): FormControl => {
44
if (controlContainer) {
5-
const control = (<FormGroup>controlContainer.control).controls[name];
5+
const control = (controlContainer.control as FormGroup).controls[name];
66
if (!control) {
77
throw new Error(`There is no control named '${name}'` +
88
(getPath(controlContainer).length > 0 ? ` within '${getPath(controlContainer).join('.')}'` : '') + '.');
@@ -18,13 +18,10 @@ export function getFormControlFromContainer(name: string, controlContainer: Cont
1818
throw new Error(`You can't pass a string to arv-validation-messages's for attribute, when the ` +
1919
`arv-validation-messages element is not a child of an element with a formGroupName or formGroup declaration.`);
2020
}
21-
}
21+
};
2222

23-
export function isControlContainerVoidOrInitialized(controlContainer: ControlContainer | undefined) {
24-
return !!(!controlContainer || (<FormGroupDirective>controlContainer).form ||
25-
(controlContainer.formDirective && (<FormGroupDirective>controlContainer.formDirective).form));
26-
}
23+
export const isControlContainerVoidOrInitialized = (controlContainer: ControlContainer | undefined) =>
24+
!!(!controlContainer || (controlContainer as FormGroupDirective).form ||
25+
(controlContainer.formDirective && (controlContainer.formDirective as FormGroupDirective).form));
2726

28-
function getPath(controlContainer: ControlContainer): string[] {
29-
return controlContainer.path || [];
30-
}
27+
const getPath = (controlContainer: ControlContainer): string[] => controlContainer.path || [];

‎angular-reactive-validation/src/reactive-validation-module-configuration-token.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,5 @@ import { InjectionToken } from '@angular/core';
22

33
import { ReactiveValidationModuleConfiguration } from './reactive-validation-module-configuration';
44

5-
export const ReactiveValidationModuleConfigurationToken =
5+
export const REACTIVE_VALIDATION_MODULE_CONFIGURATION_TOKEN =
66
new InjectionToken<ReactiveValidationModuleConfiguration>('ReactiveValidationModuleConfiguration');

‎angular-reactive-validation/src/reactive-validation.module.spec.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { TestBed } from '@angular/core/testing';
22

33
import { ReactiveValidationModule } from './reactive-validation.module';
4-
import { ReactiveValidationModuleConfigurationToken } from './reactive-validation-module-configuration-token';
4+
import { REACTIVE_VALIDATION_MODULE_CONFIGURATION_TOKEN } from './reactive-validation-module-configuration-token';
55

66
describe(`ReactiveValidationModule`, () => {
77
describe(`when not calling forRoot`, () => {
@@ -12,7 +12,7 @@ describe(`ReactiveValidationModule`, () => {
1212
});
1313

1414
it(`should not provide configuration`, () => {
15-
expect(() => TestBed.inject(ReactiveValidationModuleConfigurationToken)).toThrowError(/No provider for/);
15+
expect(() => TestBed.inject(REACTIVE_VALIDATION_MODULE_CONFIGURATION_TOKEN)).toThrowError(/No provider for/);
1616
});
1717
});
1818

@@ -29,7 +29,7 @@ describe(`ReactiveValidationModule`, () => {
2929
});
3030

3131
it(`should provide configuration`, () => {
32-
expect(TestBed.inject(ReactiveValidationModuleConfigurationToken)).toEqual(configuration);
32+
expect(TestBed.inject(REACTIVE_VALIDATION_MODULE_CONFIGURATION_TOKEN)).toEqual(configuration);
3333
});
3434
});
3535
});

‎angular-reactive-validation/src/reactive-validation.module.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { ValidationMessagesComponent } from './validation-messages/validation-me
55
import { ValidationMessageComponent } from './validation-message/validation-message.component';
66
import { FormDirective } from './form/form.directive';
77
import { ReactiveValidationModuleConfiguration } from './reactive-validation-module-configuration';
8-
import { ReactiveValidationModuleConfigurationToken } from './reactive-validation-module-configuration-token';
8+
import { REACTIVE_VALIDATION_MODULE_CONFIGURATION_TOKEN } from './reactive-validation-module-configuration-token';
99

1010
@NgModule({
1111
imports: [
@@ -27,7 +27,7 @@ export class ReactiveValidationModule {
2727
return {
2828
ngModule: ReactiveValidationModule,
2929
providers: [{
30-
provide: ReactiveValidationModuleConfigurationToken, useValue: configuration
30+
provide: REACTIVE_VALIDATION_MODULE_CONFIGURATION_TOKEN, useValue: configuration
3131
}]
3232
};
3333
}

‎angular-reactive-validation/src/validation-error.spec.ts

+6-6
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@ describe('ValidationError', () => {
1212
const error = ValidationError.fromFirstError(control);
1313

1414
expect(error).not.toBeUndefined();
15-
expect((<ValidationError>error).control).toEqual(control);
16-
expect((<ValidationError>error).key).toEqual('required');
17-
expect((<ValidationError>error).errorObject).toEqual(requiredErrorObject);
15+
expect((error as ValidationError).control).toEqual(control);
16+
expect((error as ValidationError).key).toEqual('required');
17+
expect((error as ValidationError).errorObject).toEqual(requiredErrorObject);
1818
});
1919

2020
it(`fromFirstError returns undefined when the FormControl has no errors`, () => {
@@ -37,7 +37,7 @@ describe('ValidationError', () => {
3737
const error = ValidationError.fromFirstError(control);
3838

3939
expect(error).not.toBeUndefined();
40-
expect((<ValidationError>error).hasMessage()).toEqual(true);
40+
expect((error as ValidationError).hasMessage()).toEqual(true);
4141
});
4242

4343
it(`hasMessage returns false when the errorObject doesn't contain a message`, () => {
@@ -49,7 +49,7 @@ describe('ValidationError', () => {
4949
const error = ValidationError.fromFirstError(control);
5050

5151
expect(error).not.toBeUndefined();
52-
expect((<ValidationError>error).hasMessage()).toEqual(false);
52+
expect((error as ValidationError).hasMessage()).toEqual(false);
5353
});
5454

5555
it(`getMessage returns the message from the errorObject`, () => {
@@ -64,6 +64,6 @@ describe('ValidationError', () => {
6464
const error = ValidationError.fromFirstError(control);
6565

6666
expect(error).not.toBeUndefined();
67-
expect((<ValidationError>error).getMessage()).toEqual(expected);
67+
expect((error as ValidationError).getMessage()).toEqual(expected);
6868
});
6969
});

‎angular-reactive-validation/src/validation-message/validation-message.component.spec.ts

+8-8
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ describe('ValidationMessageComponent', () => {
1919
}
2020
};
2121

22-
component = new ValidationMessageComponent(<any>undefined);
23-
error = <ValidationError>ValidationError.fromFirstError(control);
22+
component = new ValidationMessageComponent(undefined as any);
23+
error = ValidationError.fromFirstError(control) as ValidationError;
2424
});
2525

2626
it(`returns true when the error key and component key are equal (without for)`, () => {
@@ -41,7 +41,7 @@ describe('ValidationMessageComponent', () => {
4141
});
4242

4343
it(`returns false when the component 'for' doesn't equal the error's control`, () => {
44-
component.for = <any>{};
44+
component.for = {} as any;
4545
component.key = 'required';
4646

4747
const result = component.canHandle(error);
@@ -71,7 +71,7 @@ describe('ValidationMessageComponent', () => {
7171
});
7272

7373
it(`are displayed by the show function`, () => {
74-
const error = <ValidationError>ValidationError.fromFirstError(TestHostComponent.getFormControl());
74+
const error = ValidationError.fromFirstError(TestHostComponent.getFormControl()) as ValidationError;
7575

7676
validationMessageComponent.show(error);
7777

@@ -83,7 +83,7 @@ describe('ValidationMessageComponent', () => {
8383
});
8484

8585
it(`are hidden by the reset function`, () => {
86-
const error = <ValidationError>ValidationError.fromFirstError(TestHostComponent.getFormControl());
86+
const error = ValidationError.fromFirstError(TestHostComponent.getFormControl()) as ValidationError;
8787

8888
validationMessageComponent.show(error);
8989
fixture.detectChanges();
@@ -93,7 +93,7 @@ describe('ValidationMessageComponent', () => {
9393
});
9494

9595
it(`and their context is set by the show function`, () => {
96-
const error = <ValidationError>ValidationError.fromFirstError(TestHostComponent.getFormControl());
96+
const error = ValidationError.fromFirstError(TestHostComponent.getFormControl()) as ValidationError;
9797

9898
validationMessageComponent.show(error);
9999
expect(validationMessageComponent.context).toEqual(error.errorObject);
@@ -128,14 +128,14 @@ describe('ValidationMessageComponent', () => {
128128
`
129129
})
130130
class TestHostComponent {
131+
@ViewChild(ValidationMessageComponent, { static: true }) validationMessageComponent: ValidationMessageComponent;
132+
131133
age = new FormControl(0, [
132134
Validators.min(10, 'invalid age')
133135
]);
134136
form = new FormGroup({
135137
age: this.age
136138
});
137-
138-
@ViewChild(ValidationMessageComponent, { static: true }) validationMessageComponent: ValidationMessageComponent;
139139
}
140140

141141
TestBed.configureTestingModule({

‎angular-reactive-validation/src/validation-message/validation-message.component.ts

+13-12
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,6 @@ import { getFormControlFromContainer, isControlContainerVoidOrInitialized } from
1616
* TODO: Trigger revalidation by parent whenever [for] changes.
1717
*/
1818
export class ValidationMessageComponent implements OnInit {
19-
private _context: ValidationErrors | undefined;
20-
private _for: FormControl | undefined;
21-
22-
constructor(@Optional() private controlContainer: ControlContainer) { }
2319

2420
@Input()
2521
/**
@@ -43,15 +39,10 @@ export class ValidationMessageComponent implements OnInit {
4339
*/
4440
key: string | undefined;
4541

46-
private initializeForOnInit = () => {};
42+
private _context: ValidationErrors | undefined;
43+
private _for: FormControl | undefined;
4744

48-
/**
49-
* The ValidationErrors object that contains contextual information about the error, which can be used for
50-
* displaying, e.g. the minimum length within the error message.
51-
*/
52-
get context(): any {
53-
return this._context;
54-
}
45+
constructor(@Optional() private controlContainer: ControlContainer) { }
5546

5647
ngOnInit() {
5748
this.initializeForOnInit();
@@ -68,4 +59,14 @@ export class ValidationMessageComponent implements OnInit {
6859
reset() {
6960
this._context = undefined;
7061
}
62+
63+
private initializeForOnInit = () => {};
64+
65+
/**
66+
* The ValidationErrors object that contains contextual information about the error, which can be used for
67+
* displaying, e.g. the minimum length within the error message.
68+
*/
69+
get context(): any {
70+
return this._context;
71+
}
7172
}

0 commit comments

Comments
 (0)