Enable strict tsc compilation

davidwalschots · davidwalschots · commit f26a6a9dceed · 2018-05-08T19:40:17.000+02:00
diff --git a/angular-reactive-validation/src/form/form.directive.ts b/angular-reactive-validation/src/form/form.directive.ts
@@ -1,4 +1,4 @@
-import { Directive, OnInit } from '@angular/core';
+import { Directive } from '@angular/core';
 import { FormGroupDirective } from '@angular/forms';
 import { Observable } from 'rxjs/Observable';
 
@@ -9,16 +9,13 @@ import { Observable } from 'rxjs/Observable';
 /**
  * Encapsulates properties and events of the form and makes them available for child components.
  */
-export class FormDirective implements OnInit {
+export class FormDirective {
   /**
    * Observable which emits when the form is submitted.
    */
   submitted: Observable<{}>;
 
-  constructor(private formGroupDirective: FormGroupDirective) {
-  }
-
-  ngOnInit() {
-    this.submitted = this.formGroupDirective.ngSubmit.asObservable();
+  constructor(formGroupDirective: FormGroupDirective) {
+    this.submitted = formGroupDirective.ngSubmit.asObservable();
   }
 }
diff --git a/angular-reactive-validation/src/get-control-path.ts b/angular-reactive-validation/src/get-control-path.ts
@@ -14,7 +14,12 @@ export function getControlPath(control: AbstractControl): string {
       path += '.';
     }
     return path + Object.keys(control.parent.controls).find(key => {
-      return control.parent.controls[key] === control;
+      const controls = control.parent.controls;
+      if (Array.isArray(controls)) {
+        return controls[Number(key)] === control;
+      } else {
+        return controls[key] === control;
+      }
     });
   }
 
diff --git a/angular-reactive-validation/src/get-form-control-from-container.ts b/angular-reactive-validation/src/get-form-control-from-container.ts
@@ -1,15 +1,15 @@
 import { FormGroup, FormControl, ControlContainer } from '@angular/forms';
 
-export function getFormControlFromContainer(name: string, controlContainer: ControlContainer): FormControl {
+export function getFormControlFromContainer(name: string, controlContainer: ControlContainer | undefined): FormControl {
   if (controlContainer) {
     const control = (<FormGroup>controlContainer.control).controls[name];
     if (!control) {
       throw new Error(`There is no control named '${name}'` +
-        (controlContainer.path.length > 0 ? ` within '${controlContainer.path.join('.')}'` : '') + '.');
+        (getPath(controlContainer).length > 0 ? ` within '${getPath(controlContainer).join('.')}'` : '') + '.');
     }
     if (!(control instanceof FormControl)) {
       throw new Error(`The control named '${name}' ` +
-        (controlContainer.path.length > 0 ? `within '${controlContainer.path.join('.')}' ` : '') +
+        (getPath(controlContainer).length > 0 ? `within '${getPath(controlContainer).join('.')}' ` : '') +
         `is not a FormControl. Maybe you accidentally referenced a FormGroup or FormArray?`);
     }
 
@@ -19,3 +19,7 @@ export function getFormControlFromContainer(name: string, controlContainer: Cont
       `arv-validation-messages element is not a child of an element with a formGroupName or formGroup declaration.`);
   }
 }
+
+function getPath(controlContainer: ControlContainer): string[] {
+  return controlContainer.path || [];
+}
diff --git a/angular-reactive-validation/src/observable-container.ts b/angular-reactive-validation/src/observable-container.ts
@@ -22,16 +22,16 @@ export class ObservableContainer<T> {
    * @param callOnSubscribe Determines if the nextFunction should be called immediately after subscribing, even
    * if the observable hasn't emitted anything. Defaults to false.
    */
-  subscribe<TObservable>(item: T, getObservable: (item: T) => Observable<TObservable>, callOnSubscribe?: boolean);
+  subscribe<TObservable>(item: T, getObservable: (item: T) => Observable<TObservable>, callOnSubscribe?: boolean): void;
   /**
    * Subscribe the given items to the given Observable.
    * @param items The items which should be used when calling the nextFunction provided through the constructor.
    * @param getObservable Function that gets an Observable from the items provided.
    * @param callOnSubscribe Determines if the nextFunction should be called immediately after subscribing, even
    * if the observable hasn't emitted anything. Defaults to false.
    */
-  subscribe<TObservable>(items: T[], getObservable: (item: T) => Observable<TObservable>, callOnSubscribe?: boolean);
-  subscribe<TObservable>(items: T | T[], getObservable: (item: T) => Observable<TObservable>, callOnSubscribe: boolean = false) {
+  subscribe<TObservable>(items: T[], getObservable: (item: T) => Observable<TObservable>, callOnSubscribe?: boolean): void;
+  subscribe<TObservable>(items: T | T[], getObservable: (item: T) => Observable<TObservable>, callOnSubscribe: boolean = false): void {
     if (!items) {
       return;
     }
diff --git a/angular-reactive-validation/src/validation-error.spec.ts b/angular-reactive-validation/src/validation-error.spec.ts
@@ -11,9 +11,10 @@ describe('ValidationError', () => {
     };
     const error = ValidationError.fromFirstError(control);
 
-    expect(error.control).toEqual(control);
-    expect(error.key).toEqual('required');
-    expect(error.errorObject).toEqual(requiredErrorObject);
+    expect(error).not.toBeUndefined();
+    expect((<ValidationError>error).control).toEqual(control);
+    expect((<ValidationError>error).key).toEqual('required');
+    expect((<ValidationError>error).errorObject).toEqual(requiredErrorObject);
   });
 
   it(`fromFirstError returns undefined when the FormControl has no errors`, () => {
@@ -34,7 +35,9 @@ describe('ValidationError', () => {
       }
     };
     const error = ValidationError.fromFirstError(control);
-    expect(error.hasMessage()).toEqual(true);
+
+    expect(error).not.toBeUndefined();
+    expect((<ValidationError>error).hasMessage()).toEqual(true);
   });
 
   it(`hasMessage returns false when the errorObject doesn't contain a message`, () => {
@@ -44,7 +47,9 @@ describe('ValidationError', () => {
       }
     };
     const error = ValidationError.fromFirstError(control);
-    expect(error.hasMessage()).toEqual(false);
+
+    expect(error).not.toBeUndefined();
+    expect((<ValidationError>error).hasMessage()).toEqual(false);
   });
 
   it(`getMessage returns the message from the errorObject`, () => {
@@ -57,6 +62,8 @@ describe('ValidationError', () => {
       }
     };
     const error = ValidationError.fromFirstError(control);
-    expect(error.getMessage()).toEqual(expected);
+
+    expect(error).not.toBeUndefined();
+    expect((<ValidationError>error).getMessage()).toEqual(expected);
   });
 });
diff --git a/angular-reactive-validation/src/validation-error.ts b/angular-reactive-validation/src/validation-error.ts
@@ -5,17 +5,18 @@ export class ValidationError {
   key: string;
   errorObject: ValidationErrors;
 
+  constructor(control: FormControl, key: string, errorObject: ValidationErrors) {
+    this.control = control;
+    this.key = key;
+    this.errorObject = errorObject;
+  }
+
   static fromFirstError(control: FormControl): ValidationError | undefined {
     if (!control.errors) {
       return undefined;
     }
 
-    const error = new ValidationError();
-    error.control = control;
-    error.key = Object.keys(control.errors)[0];
-    error.errorObject = control.errors[Object.keys(control.errors)[0]];
-
-    return error;
+    return new ValidationError(control, Object.keys(control.errors)[0], control.errors[Object.keys(control.errors)[0]]);
   }
 
   hasMessage(): boolean {
diff --git a/angular-reactive-validation/src/validation-message/validation-message.component.spec.ts b/angular-reactive-validation/src/validation-message/validation-message.component.spec.ts
@@ -2,6 +2,7 @@ import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { ValidationMessageComponent } from './validation-message.component';
 import { ValidationError } from '../validation-error';
 import { Component, ViewChild } from '@angular/core';
+import { ControlContainer } from '@angular/forms';
 
 describe('ValidationMessageComponent', () => {
   describe('canHandle', () => {
@@ -15,8 +16,9 @@ describe('ValidationMessageComponent', () => {
           required: true
         }
       };
-      component = new ValidationMessageComponent(undefined);
-      error = ValidationError.fromFirstError(control);
+
+      component = new ValidationMessageComponent(<any>undefined);
+      error = <ValidationError>ValidationError.fromFirstError(control);
     });
 
     it(`returns true when the error key and component key are equal (without for)`, () => {
@@ -67,7 +69,7 @@ describe('ValidationMessageComponent', () => {
     });
 
     it(`are displayed by the show function`, () => {
-      const error = ValidationError.fromFirstError(TestHostComponent.getFormControl());
+      const error = <ValidationError>ValidationError.fromFirstError(TestHostComponent.getFormControl());
 
       validationMessageComponent.show(error);
 
@@ -79,7 +81,7 @@ describe('ValidationMessageComponent', () => {
     });
 
     it(`are hidden by the reset function`, () => {
-      const error = ValidationError.fromFirstError(TestHostComponent.getFormControl());
+      const error = <ValidationError>ValidationError.fromFirstError(TestHostComponent.getFormControl());
 
       validationMessageComponent.show(error);
       fixture.detectChanges();
@@ -89,7 +91,7 @@ describe('ValidationMessageComponent', () => {
     });
 
     it(`and their context is set by the show function`, () => {
-      const error = ValidationError.fromFirstError(TestHostComponent.getFormControl());
+      const error = <ValidationError>ValidationError.fromFirstError(TestHostComponent.getFormControl());
 
       validationMessageComponent.show(error);
       expect(validationMessageComponent.context).toEqual(error.errorObject);
diff --git a/angular-reactive-validation/src/validation-message/validation-message.component.ts b/angular-reactive-validation/src/validation-message/validation-message.component.ts
@@ -17,8 +17,8 @@ import { getFormControlFromContainer } from '../get-form-control-from-container'
  * TODO: Trigger revalidation by parent whenever [for] changes.
  */
 export class ValidationMessageComponent {
-  private _context: ValidationErrors;
-  private _for: FormControl;
+  private _context: ValidationErrors | undefined;
+  private _for: FormControl | undefined;
 
   constructor(@Optional() private controlContainer: ControlContainer) { }
 
@@ -27,18 +27,18 @@ export class ValidationMessageComponent {
    * The FormControl for which a custom validation message should be shown. This is only required when the parent
    * ValidationMessagesComponent has multiple FormControls specified.
    */
-  set for(control: FormControl | string) {
+  set for(control: FormControl | string | undefined) {
     this._for = typeof control === 'string' ? getFormControlFromContainer(control, this.controlContainer) : control;
   }
-  get for(): FormControl | string {
+  get for(): FormControl | string | undefined {
     return this._for;
   }
 
   @Input()
   /**
    * The name of the returned validation object property for which the custom validation message should be shown.
    */
-  key: string;
+  key: string | undefined;
 
   @Input()
   /**
diff --git a/angular-reactive-validation/src/validation-messages/validation-messages.component.ts b/angular-reactive-validation/src/validation-messages/validation-messages.component.ts
@@ -92,7 +92,7 @@ export class ValidationMessagesComponent implements OnInit, AfterContentInit, On
   }
 
   private getFirstErrorPerControl() {
-    return this._for.filter(control => this.configuration && this.configuration.displayValidationMessageWhen ?
+    return <ValidationError[]>this._for.filter(control => this.configuration && this.configuration.displayValidationMessageWhen ?
       this.configuration.displayValidationMessageWhen(control, this.formSubmitDirective ? this.formSubmitted : undefined) :
       control.touched || this.formSubmitted
     ).map(ValidationError.fromFirstError).filter(value => value !== undefined);
diff --git a/angular-reactive-validation/src/validator-declaration.ts b/angular-reactive-validation/src/validator-declaration.ts
@@ -68,21 +68,23 @@ export class ValidatorDeclaration {
 
   private static validateAndSetMessageIfInvalid(control: AbstractControl,
     validatorFactoryFn: (...args: any[]) => ValidatorFn, resultKey: string,
-    message?: string | ((...args: any[]) => string), ...args: any[]): ValidationErrors {
+    message?: string | ((...args: any[]) => string), ...args: any[]): ValidationErrors | null {
 
       const validationResult = ValidatorDeclaration.validate(control, validatorFactoryFn, ...args);
       ValidatorDeclaration.setMessageIfInvalid(control, resultKey, validationResult, message, ...args);
 
       return validationResult;
   }
 
-  private static validate(control: AbstractControl, validatorFactoryFn: (...args: any[]) => ValidatorFn, ...args: any[]): ValidationErrors {
-    const wrappedValidatorFn = validatorFactoryFn(...args);
-    return wrappedValidatorFn(control);
+  private static validate(control: AbstractControl, validatorFactoryFn: (...args: any[]) => ValidatorFn, ...args: any[]):
+    ValidationErrors | null {
+
+      const wrappedValidatorFn = validatorFactoryFn(...args);
+      return wrappedValidatorFn(control);
   }
 
   private static setMessageIfInvalid(control: AbstractControl, resultKey: string,
-    validationResult: ValidationErrors, message?: string | ((...args: any[]) => string), ...args: any[]) {
+    validationResult: ValidationErrors | null, message?: string | ((...args: any[]) => string), ...args: any[]) {
     if (message) {
       if (validationResult && validationResult[resultKey]) {
         if (typeof message === 'function') {
diff --git a/angular-reactive-validation/src/validators.spec.ts b/angular-reactive-validation/src/validators.spec.ts
@@ -1,5 +1,5 @@
 import { TestBed, async } from '@angular/core/testing';
-import { Validators as AngularValidators, ValidatorFn } from '@angular/forms';
+import { Validators as AngularValidators, ValidatorFn, ValidationErrors } from '@angular/forms';
 import { FormControl } from '@angular/forms';
 
 import { Validators } from './validators';
@@ -36,7 +36,7 @@ describe('Validators', () => {
       const result = combination.validatorFn(combination.control);
       expect(result).not.toBeNull(
         `A validator deemed the control value '${combination.control.value}' to be valid. This shouldn't be the case`);
-      expect(result.message).toBeUndefined(
+      expect((<ValidationErrors>result).message).toBeUndefined(
         `The angular framework uses the 'message' property. This behaviour is overwritten by the library`);
     });
   });
@@ -83,16 +83,20 @@ describe('Validators', () => {
     combinations.forEach(combination => {
       combination.controls.forEach(control => {
         const nativeResult = combination.nativeValidatorFn(control);
-        const libraryResult = combination.libraryValidatorFn(control);
+        let libraryResult = combination.libraryValidatorFn(control);
+
+        libraryResult = libraryResult;
 
         // Below we perform operations to remove the message property, and replace an empty object
         // with true. This is not perfect for testing. But, the only way to work around Angular
         // sometimes using booleans and sometimes objects for specifying validation state.
-        for (const property in libraryResult) {
-          if (libraryResult.hasOwnProperty(property)) {
-            delete libraryResult[property].message;
-            if (Object.getOwnPropertyNames(libraryResult[property]).length === 0) {
-              libraryResult[property] = true;
+        if (libraryResult) {
+          for (const property in libraryResult) {
+            if (libraryResult.hasOwnProperty(property)) {
+              delete libraryResult[property].message;
+              if (Object.getOwnPropertyNames(libraryResult[property]).length === 0) {
+                libraryResult[property] = true;
+              }
             }
           }
         }
@@ -132,7 +136,8 @@ describe('Validators', () => {
 
     combinations.forEach(combination => {
       const result = combination.validatorFn(combination.control);
-      expect(result[Object.getOwnPropertyNames(result)[0]].message).toEqual(expectedMessage);
+      expect(result).not.toBeNull();
+      expect((<ValidationErrors>result)[Object.getOwnPropertyNames(result)[0]].message).toEqual(expectedMessage);
     });
   });
 
@@ -157,7 +162,8 @@ describe('Validators', () => {
 
     combinations.forEach(combination => {
       const result = combination.validatorFn(combination.control);
-      expect(result[Object.getOwnPropertyNames(result)[0]].message).toEqual(combination.expectedMessage);
+      expect(result).not.toBeNull();
+      expect((<ValidationErrors>result)[Object.getOwnPropertyNames(result)[0]].message).toEqual(combination.expectedMessage);
     });
   });
 
diff --git a/angular-reactive-validation/src/validators.ts b/angular-reactive-validation/src/validators.ts
@@ -33,7 +33,7 @@ export class Validators {
    */
   static compose(validators: (ValidatorFn|null|undefined)[]): ValidatorFn|null;
   static compose(validators: (ValidatorFn|null|undefined)[]|null): ValidatorFn|null {
-    return AngularValidators.compose(validators);
+    return validators === null ? AngularValidators.compose(validators) : AngularValidators.compose(validators);
   }
 
   /**
diff --git a/tsconfig.json b/tsconfig.json
@@ -9,6 +9,8 @@
     "experimentalDecorators": true,
     "importHelpers": true,
     "target": "es5",
+    "strict": true,
+    "strictPropertyInitialization": false,
     "typeRoots": [
       "node_modules/@types"
     ],

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,12 @@ export function getControlPath(control: AbstractControl): string {`
`14`	`14`	`path += '.';`
`15`	`15`	`}`
`16`	`16`	`return path + Object.keys(control.parent.controls).find(key => {`
`17`		`- return control.parent.controls[key] === control;`
	`17`	`+ const controls = control.parent.controls;`
	`18`	`+ if (Array.isArray(controls)) {`
	`19`	`+ return controls[Number(key)] === control;`
	`20`	`+ } else {`
	`21`	`+ return controls[key] === control;`
	`22`	`+ }`
`18`	`23`	`});`
`19`	`24`	`}`
`20`	`25`
Original file line number	Diff line number	Diff line change
`@@ -1,15 +1,15 @@`
`1`	`1`	`import { FormGroup, FormControl, ControlContainer } from '@angular/forms';`
`2`	`2`
`3`		`-export function getFormControlFromContainer(name: string, controlContainer: ControlContainer): FormControl {`
	`3`	`+export function getFormControlFromContainer(name: string, controlContainer: ControlContainer \| undefined): FormControl {`
`4`	`4`	`if (controlContainer) {`
`5`	`5`	`const control = (<FormGroup>controlContainer.control).controls[name];`
`6`	`6`	`if (!control) {`
`7`	`7`	throw new Error(`There is no control named '${name}'` +
`8`		- (controlContainer.path.length > 0 ? ` within '${controlContainer.path.join('.')}'` : '') + '.');
	`8`	+ (getPath(controlContainer).length > 0 ? ` within '${getPath(controlContainer).join('.')}'` : '') + '.');
`9`	`9`	`}`
`10`	`10`	`if (!(control instanceof FormControl)) {`
`11`	`11`	throw new Error(`The control named '${name}' ` +
`12`		- (controlContainer.path.length > 0 ? `within '${controlContainer.path.join('.')}' ` : '') +
	`12`	+ (getPath(controlContainer).length > 0 ? `within '${getPath(controlContainer).join('.')}' ` : '') +
`13`	`13`	`is not a FormControl. Maybe you accidentally referenced a FormGroup or FormArray?`);
`14`	`14`	`}`
`15`	`15`
`@@ -19,3 +19,7 @@ export function getFormControlFromContainer(name: string, controlContainer: Cont`
`19`	`19`	`arv-validation-messages element is not a child of an element with a formGroupName or formGroup declaration.`);
`20`	`20`	`}`
`21`	`21`	`}`
	`22`	`+`
	`23`	`+function getPath(controlContainer: ControlContainer): string[] {`
	`24`	`+ return controlContainer.path \|\| [];`
	`25`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -92,7 +92,7 @@ export class ValidationMessagesComponent implements OnInit, AfterContentInit, On`
`92`	`92`	`}`
`93`	`93`
`94`	`94`	`private getFirstErrorPerControl() {`
`95`		`- return this._for.filter(control => this.configuration && this.configuration.displayValidationMessageWhen ?`
	`95`	`+ return <ValidationError[]>this._for.filter(control => this.configuration && this.configuration.displayValidationMessageWhen ?`
`96`	`96`	`this.configuration.displayValidationMessageWhen(control, this.formSubmitDirective ? this.formSubmitted : undefined) :`
`97`	`97`	`control.touched \|\| this.formSubmitted`
`98`	`98`	`).map(ValidationError.fromFirstError).filter(value => value !== undefined);`