feat(core): partial support strict mode (#3217)

build/util.ts

@@ -20,7 +20,7 @@ export function exec(cmd: string, options: ExecSyncOptions = { stdio: 'inherit'
   return execSync(cmd, options);
 }
 
-export function copyDirSync(src, dest) {
+export function copyDirSync(src: string, dest: string) {
   fs.mkdirSync(dest, { recursive: true });
   let entries = fs.readdirSync(src, { withFileTypes: true });
 

demo/src/app/app.component.ts

@@ -105,7 +105,7 @@ export class AppComponent implements OnInit {
   ];
 
   private documentTitle$ = this.router.events.pipe(
-    filter((event) => event instanceof NavigationEnd),
+    filter((event: any) => event instanceof NavigationEnd),
     map((event: NavigationEnd) => event.urlAfterRedirects),
     map((currentUrl) => {
       const sidebarLinks = this.menu.flatMap((group) => group.links);

demo/src/app/examples/advanced/datatable-integration/app.component.ts

@@ -8,7 +8,28 @@ import { FormlyFormOptions, FormlyFieldConfig } from '@ngx-formly/core';
 })
 export class AppComponent {
   form = new FormGroup({});
-  model: any;
+  model: any = {
+    name: 'name1',
+    surname: 'surname1',
+    investments: [
+      {
+        investmentName: 'project1',
+        investmentDate: '',
+        stockIdentifier: 1,
+      },
+      {
+        investmentName: 'project2',
+        investmentDate: '',
+        stockIdentifier: 2,
+      },
+      {
+        investmentName: 'project3',
+        investmentDate: '',
+        stockIdentifier: 3,
+      },
+    ],
+  };
+
   options: FormlyFormOptions = {};
 
   fields: FormlyFieldConfig[] = [
@@ -74,35 +95,7 @@ export class AppComponent {
     },
   ];
 
-  constructor() {
-    this.fetch((data) => (this.model = data));
-  }
-
   submit() {
     alert(JSON.stringify(this.model));
   }
-
-  fetch(cb) {
-    cb({
-      name: 'name1',
-      surname: 'surname1',
-      investments: [
-        {
-          investmentName: 'project1',
-          investmentDate: '',
-          stockIdentifier: 1,
-        },
-        {
-          investmentName: 'project2',
-          investmentDate: '',
-          stockIdentifier: 2,
-        },
-        {
-          investmentName: 'project3',
-          investmentDate: '',
-          stockIdentifier: 3,
-        },
-      ],
-    });
-  }
 }

demo/src/app/examples/advanced/datatable-integration/datatable.type.ts

@@ -33,10 +33,10 @@ import { TableColumn } from '@swimlane/ngx-datatable';
   `,
 })
 export class DatatableTypeComponent extends FieldArrayType implements OnInit {
-  @ViewChild('defaultColumn', { static: true }) public defaultColumn: TemplateRef<any>;
+  @ViewChild('defaultColumn', { static: true }) public defaultColumn!: TemplateRef<any>;
 
   ngOnInit() {
-    this.to.columns.forEach((column) => (column.cellTemplate = this.defaultColumn));
+    (this.to.columns as TableColumn[]).forEach((column) => (column.cellTemplate = this.defaultColumn));
   }
 
   getField(parent: FormlyFieldConfig, column: TableColumn, rowIndex: number): FormlyFieldConfig {

demo/src/app/examples/advanced/extending-field-types/app.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
 import { FormlyModule } from '@ngx-formly/core';
 import { FormlyBootstrapModule } from '@ngx-formly/bootstrap';
 import { MatTabsModule } from '@angular/material/tabs';

demo/src/app/examples/advanced/grid-integration/grid.type.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { FieldArrayType } from '@ngx-formly/core';
-import { GridOptions } from 'ag-grid-community';
+import { FirstDataRenderedEvent, GridOptions, ColDef } from 'ag-grid-community';
 import { GridFormlyCellComponent } from './grid-formly-cell.component';
 
 @Component({
@@ -29,7 +29,9 @@ export class GridTypeComponent extends FieldArrayType implements OnInit {
     };
 
     // map cell Renderer to Formly Component
-    this.to.gridOptions.columnDefs.forEach((column) => (column.cellRendererFramework = GridFormlyCellComponent));
+    this.to.gridOptions.columnDefs.forEach((column: ColDef) => {
+      column.cellRenderer = GridFormlyCellComponent;
+    });
 
     // set grid options and context of the parent formly field
     const gridOptions: GridOptions = this.to.gridOptions || {};
@@ -40,7 +42,7 @@ export class GridTypeComponent extends FieldArrayType implements OnInit {
     this.gridOptions = gridOptions;
   }
 
-  onFirstDataRendered(params) {
+  onFirstDataRendered(params: FirstDataRenderedEvent) {
     params.api.sizeColumnsToFit();
   }
 }

demo/src/app/examples/advanced/json-schema/app.module.ts

@@ -11,47 +11,47 @@ import { ObjectTypeComponent } from './object.type';
 import { MultiSchemaTypeComponent } from './multischema.type';
 import { NullTypeComponent } from './null.type';
 
-export function minItemsValidationMessage(err, field: FormlyFieldConfig) {
+export function minItemsValidationMessage(error: any, field: FormlyFieldConfig) {
   return `should NOT have fewer than ${field.templateOptions.minItems} items`;
 }
 
-export function maxItemsValidationMessage(err, field: FormlyFieldConfig) {
+export function maxItemsValidationMessage(error: any, field: FormlyFieldConfig) {
   return `should NOT have more than ${field.templateOptions.maxItems} items`;
 }
 
-export function minLengthValidationMessage(err, field: FormlyFieldConfig) {
+export function minLengthValidationMessage(error: any, field: FormlyFieldConfig) {
   return `should NOT be shorter than ${field.templateOptions.minLength} characters`;
 }
 
-export function maxLengthValidationMessage(err, field: FormlyFieldConfig) {
+export function maxLengthValidationMessage(error: any, field: FormlyFieldConfig) {
   return `should NOT be longer than ${field.templateOptions.maxLength} characters`;
 }
 
-export function minValidationMessage(err, field: FormlyFieldConfig) {
+export function minValidationMessage(error: any, field: FormlyFieldConfig) {
   return `should be >= ${field.templateOptions.min}`;
 }
 
-export function maxValidationMessage(err, field: FormlyFieldConfig) {
+export function maxValidationMessage(error: any, field: FormlyFieldConfig) {
   return `should be <= ${field.templateOptions.max}`;
 }
 
-export function multipleOfValidationMessage(err, field: FormlyFieldConfig) {
+export function multipleOfValidationMessage(error: any, field: FormlyFieldConfig) {
   return `should be multiple of ${field.templateOptions.step}`;
 }
 
-export function exclusiveMinimumValidationMessage(err, field: FormlyFieldConfig) {
+export function exclusiveMinimumValidationMessage(error: any, field: FormlyFieldConfig) {
   return `should be > ${field.templateOptions.step}`;
 }
 
-export function exclusiveMaximumValidationMessage(err, field: FormlyFieldConfig) {
+export function exclusiveMaximumValidationMessage(error: any, field: FormlyFieldConfig) {
   return `should be < ${field.templateOptions.step}`;
 }
 
-export function constValidationMessage(err, field: FormlyFieldConfig) {
+export function constValidationMessage(error: any, field: FormlyFieldConfig) {
   return `should be equal to constant "${field.templateOptions.const}"`;
 }
 
-export function typeValidationMessage({ schemaType }) {
+export function typeValidationMessage({ schemaType }: any) {
   return `should be "${schemaType[0]}".`;
 }
 

demo/src/app/examples/advanced/multi-step-form/stepper.type.ts

@@ -23,7 +23,7 @@ import { FieldType, FormlyFieldConfig } from '@ngx-formly/core';
   `,
 })
 export class FormlyFieldStepper extends FieldType {
-  isValid(field: FormlyFieldConfig) {
+  isValid(field: FormlyFieldConfig): boolean {
     if (field.key) {
       return field.formControl.valid;
     }

demo/src/app/examples/advanced/repeating-section-input/app.component.ts

@@ -9,7 +9,7 @@ import { startWith, tap, filter } from 'rxjs/operators';
 })
 export class AppComponent {
   form = new FormGroup({});
-  model = {
+  model: any = {
     investmentsCount: 3,
     investments: [],
   };

demo/src/app/examples/advanced/repeating-section/app.component.ts

@@ -8,7 +8,7 @@ import { FormlyFormOptions, FormlyFieldConfig } from '@ngx-formly/core';
 })
 export class AppComponent {
   form = new FormGroup({});
-  model = {
+  model: any = {
     tasks: [null],
   };
   options: FormlyFormOptions = {};

demo/src/app/examples/advanced/tabs/tabs.type.ts

@@ -18,7 +18,7 @@ import { FieldType, FormlyFieldConfig } from '@ngx-formly/core';
   `,
 })
 export class FormlyFieldTabs extends FieldType {
-  isValid(field: FormlyFieldConfig) {
+  isValid(field: FormlyFieldConfig): boolean {
     if (field.key) {
       return field.formControl.valid;
     }

demo/src/app/examples/field-options/model-options/app.module.ts

@@ -6,7 +6,7 @@ import { FormlyBootstrapModule } from '@ngx-formly/bootstrap';
 
 import { AppComponent } from './app.component';
 
-export function RequiredValidatorMessage(err, field: FormlyFieldConfig) {
+export function RequiredValidatorMessage(error: any, field: FormlyFieldConfig) {
   return `"This required field was validated after ${field.formControl.updateOn}"`;
 }
 

demo/src/app/examples/introduction/app.component.ts

@@ -38,6 +38,8 @@ export class AppComponent {
           if (formState.awesomeIsForced) {
             return 'And look! This field magically got focus!';
           }
+
+          return '';
         },
       },
     },

demo/src/app/examples/other/button/app.component.ts

@@ -16,7 +16,7 @@ export class AppComponent {
       type: 'button',
       templateOptions: {
         text: 'With Function',
-        onClick: ($event) => alert('You clicked me!'),
+        onClick: () => alert('You clicked me!'),
       },
     },
     {
@@ -25,7 +25,7 @@ export class AppComponent {
         label: 'Click this guy',
         text: 'JSON Only',
         btnType: 'info',
-        onClick: ($event) => {
+        onClick: () => {
           this.form.get('someInput').setValue('clicked!');
         },
         description: 'These can have labels and stuff too if you want....',

demo/src/app/examples/other/button/button-type.component.ts

@@ -12,7 +12,7 @@ import { FieldType } from '@ngx-formly/core';
   `,
 })
 export class FormlyFieldButton extends FieldType {
-  onClick($event) {
+  onClick($event: Event) {
     if (this.to.onClick) {
       this.to.onClick($event);
     }

demo/src/app/examples/other/input-file/file-value-accessor.ts

@@ -13,10 +13,10 @@ import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
 // https://github.com/angular/angular/issues/7341
 export class FileValueAccessor implements ControlValueAccessor {
   value: any;
-  onChange = (_) => {};
+  onChange = (_: any) => {};
   onTouched = () => {};
 
-  writeValue(value) {}
+  writeValue(value: any) {}
   registerOnChange(fn: any) {
     this.onChange = fn;
   }

demo/src/app/examples/other/material-formfield-hint-align/app.component.ts

@@ -7,8 +7,8 @@ import { FormlyFormOptions, FormlyFieldConfig } from '@ngx-formly/core';
   templateUrl: './app.component.html',
 })
 export class AppComponent {
-  @ViewChild('hintStart', { static: true }) hintStart: TemplateRef<any>;
-  @ViewChild('hintEnd', { static: true }) hintEnd: TemplateRef<any>;
+  @ViewChild('hintStart', { static: true }) hintStart!: TemplateRef<any>;
+  @ViewChild('hintEnd', { static: true }) hintEnd!: TemplateRef<any>;
 
   form = new FormGroup({});
   model: any = {};

demo/src/app/examples/other/material-prefix-suffix/addons.wrapper.ts

@@ -30,8 +30,8 @@ import { FieldWrapper } from '@ngx-formly/core';
   `,
 })
 export class FormlyWrapperAddons extends FieldWrapper implements AfterViewInit {
-  @ViewChild('matPrefix', { static: true }) matPrefix: TemplateRef<any>;
-  @ViewChild('matSuffix', { static: true }) matSuffix: TemplateRef<any>;
+  @ViewChild('matPrefix', { static: true }) matPrefix!: TemplateRef<any>;
+  @ViewChild('matSuffix', { static: true }) matSuffix!: TemplateRef<any>;
 
   ngAfterViewInit() {
     if (this.matPrefix) {

demo/src/app/examples/validation/async-validation-update-on/app.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { FormGroup, FormControl } from '@angular/forms';
+import { FormGroup, AbstractControl } from '@angular/forms';
 import { FormlyFormOptions, FormlyFieldConfig } from '@ngx-formly/core';
 import { of } from 'rxjs';
 
@@ -28,7 +28,7 @@ export class AppComponent {
       },
       asyncValidators: {
         uniqueUsername: {
-          expression: (control: FormControl) => {
+          expression: (control: AbstractControl) => {
             return of(this.existingUsers.indexOf(control.value) === -1);
           },
           message: 'This username is already taken.',

demo/src/app/examples/validation/built-in-validations/app.component.ts

@@ -61,7 +61,7 @@ export class AppComponent {
       },
       validation: {
         messages: {
-          pattern: (error, field: FormlyFieldConfig) => `"${field.formControl.value}" is not a valid IP Address`,
+          pattern: (error: any, field: FormlyFieldConfig) => `"${field.formControl.value}" is not a valid IP Address`,
         },
       },
     },

demo/src/app/examples/validation/built-in-validations/app.module.ts

@@ -1,23 +1,23 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
-import { FormlyModule } from '@ngx-formly/core';
+import { FormlyFieldConfig, FormlyModule } from '@ngx-formly/core';
 import { FormlyBootstrapModule } from '@ngx-formly/bootstrap';
 import { AppComponent } from './app.component';
 
-export function minLengthValidationMessage(err, field) {
+export function minLengthValidationMessage(error: any, field: FormlyFieldConfig) {
   return `Should have atleast ${field.templateOptions.minLength} characters`;
 }
 
-export function maxLengthValidationMessage(err, field) {
+export function maxLengthValidationMessage(error: any, field: FormlyFieldConfig) {
   return `This value should be less than ${field.templateOptions.maxLength} characters`;
 }
 
-export function minValidationMessage(err, field) {
+export function minValidationMessage(error: any, field: FormlyFieldConfig) {
   return `This value should be more than ${field.templateOptions.min}`;
 }
 
-export function maxValidationMessage(err, field) {
+export function maxValidationMessage(error: any, field: FormlyFieldConfig) {
   return `This value should be less than ${field.templateOptions.max}`;
 }
 

demo/src/app/examples/validation/custom-validation-parameters/app.module.ts

@@ -1,11 +1,15 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { ReactiveFormsModule, FormControl, ValidationErrors } from '@angular/forms';
+import { ReactiveFormsModule, ValidationErrors, AbstractControl } from '@angular/forms';
 import { FormlyModule, FormlyFieldConfig } from '@ngx-formly/core';
 import { FormlyBootstrapModule } from '@ngx-formly/bootstrap';
 import { AppComponent } from './app.component';
 
-export function dateFutureValidator(control: FormControl, field: FormlyFieldConfig, options = {}): ValidationErrors {
+export function dateFutureValidator(
+  control: AbstractControl,
+  field: FormlyFieldConfig,
+  options = {},
+): ValidationErrors {
   return { 'date-future': { message: `Validator options: ${JSON.stringify(options)}` } };
 }