feat(core): enable initialValueIsDefault for all fields (#3219)

BREAKING CHANGE: minimal required version of `@angular/forms` is `v13.2`.

UPGRADE-6.0.md

@@ -179,7 +179,7 @@ UPGRADE FROM 5.0 to 6.0
     },
   ```
 
-
+  - Reset form value: In case you rely on `form.reset()` instead of `options.resetModel()`, please note that if you call `reset` without an explicit value, its value reverts to its default value instead of `null`. 
 
 @ngx-formly/core/json-schema
 ----------------------------

demo/src/app/shared/example-viewer/example-viewer.component.html

@@ -9,7 +9,6 @@
       [matTooltip]="'Debug'"
       aria-label="Debug example source"
     >
-      >
       <mat-icon>bug_report</mat-icon>
     </button>
     <formly-stackblitz-button [type]="type" [example]="exampleData"></formly-stackblitz-button>

demo/src/app/shared/example-viewer/example-viewer.component.scss

@@ -17,7 +17,7 @@
   padding: 8px 20px;
   position: sticky;
   top: 0;
-  z-index: 1;
+  z-index: 2;
 }
 
 .docs-example-viewer-title-spacer {

package.json

@@ -51,17 +51,17 @@
   },
   "homepage": "https://github.com/ngx-formly/ngx-formly#readme",
   "dependencies": {
-    "@angular/animations": "^13.1.2",
-    "@angular/cdk": "^13.1.2",
-    "@angular/common": "^13.1.2",
-    "@angular/core": "^13.1.2",
-    "@angular/forms": "^13.1.2",
-    "@angular/localize": "^13.1.2",
-    "@angular/material": "^13.1.2",
-    "@angular/platform-browser": "^13.1.2",
-    "@angular/platform-browser-dynamic": "^13.1.2",
-    "@angular/platform-server": "^13.1.2",
-    "@angular/router": "^13.1.2",
+    "@angular/animations": "^13.2",
+    "@angular/cdk": "^13.2",
+    "@angular/common": "^13.2",
+    "@angular/core": "^13.2",
+    "@angular/forms": "^13.2",
+    "@angular/localize": "^13.2",
+    "@angular/material": "^13.2",
+    "@angular/platform-browser": "^13.2",
+    "@angular/platform-browser-dynamic": "^13.2",
+    "@angular/platform-server": "^13.2",
+    "@angular/router": "^13.2",
     "@ionic/angular": "^6.0.2",
     "@nativescript/angular": "^13.0.1",
     "@nativescript/core": "^8.1.5",
@@ -97,21 +97,21 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~13.2.4",
-    "@angular-devkit/core": "^13.1.3",
-    "@angular-devkit/schematics": "^13.1.3",
+    "@angular-devkit/core": "^13.2.0",
+    "@angular-devkit/schematics": "^13.2.0",
     "@angular-eslint/builder": "^13.1.0",
     "@angular-eslint/eslint-plugin": "^13.1.0",
     "@angular-eslint/eslint-plugin-template": "^13.1.0",
     "@angular-eslint/schematics": "^13.1.0",
     "@angular-eslint/template-parser": "^13.1.0",
-    "@angular/cli": "^13.1.3",
+    "@angular/cli": "^13.2.0",
     "@angular/compiler": "^13.0.2",
     "@angular/compiler-cli": "^13.0.2",
     "@angular/language-service": "^13.0.2",
     "@commitlint/cli": "^16.0.0",
     "@commitlint/config-angular": "^16.0.0",
     "@nguniversal/builders": "^13.0.1",
-    "@schematics/angular": "^13.1.3",
+    "@schematics/angular": "^13.2.0",
     "@types/estree": "^0.0.51",
     "@types/express": "^4.17.11",
     "@types/jest": "^27.4.0",

src/core/package.json

@@ -6,7 +6,7 @@
     "tslib": "^2.0.0"
   },
   "peerDependencies": {
-    "@angular/forms": ">=13.0.0",
+    "@angular/forms": ">=13.2.0",
     "rxjs": "^6.5.3 || ^7.0.0"
   }
 }

src/core/src/lib/components/formly.form.spec.ts

@@ -348,8 +348,8 @@ describe('FormlyForm Component', () => {
       );
 
       form.reset();
-      expect(model.bar).toBeNull();
-      expect(fields[1].formControl.value).toBeNull();
+      expect(model.bar).toBeUndefined();
+      expect(fields[1].formControl.value).toBeUndefined();
     });
 
     it('should hide/display field using a function with nested field key', () => {

src/core/src/lib/extensions/field-form/field-form.ts

@@ -61,7 +61,7 @@ export class FieldFormExtension implements FormlyExtension {
         control = new FormGroup({}, controlOptions);
       } else {
         const value = hasKey(field) ? getFieldValue(field) : field.defaultValue;
-        control = new FormControl({ value, disabled: false }, controlOptions);
+        control = new FormControl({ value, disabled: false }, { ...controlOptions, initialValueIsDefault: true });
       }
     }
 

src/core/src/lib/extensions/field-validation/field-validation.ts

@@ -142,7 +142,7 @@ export class FieldValidationExtension implements FormlyExtension {
     }
 
     const ctrl = field.formControl;
-    ctrl?.['_childrenErrors']?.[name]?.();
+    ctrl?._childrenErrors?.[name]?.();
 
     if (isObject(errors)) {
       Object.keys(errors).forEach((name) => {
@@ -153,8 +153,8 @@ export class FieldValidationExtension implements FormlyExtension {
           const { errorPath, ...opts } = errors[name];
           childCtrl.setErrors({ ...(childCtrl.errors || {}), [name]: opts });
 
-          !ctrl['_childrenErrors'] && defineHiddenProp(ctrl, '_childrenErrors', {});
-          ctrl['_childrenErrors'][name] = () => {
+          !ctrl._childrenErrors && defineHiddenProp(ctrl, '_childrenErrors', {});
+          ctrl._childrenErrors[name] = () => {
             const { [name]: toDelete, ...childErrors } = childCtrl.errors || {};
             childCtrl.setErrors(Object.keys(childErrors).length === 0 ? null : childErrors);
           };

src/core/src/lib/services/formly.builder.ts

@@ -38,18 +38,11 @@ export class FormlyFormBuilder {
       return;
     }
 
-    this.getExtensions().forEach((extension) => extension.prePopulate?.(field));
-    this.getExtensions().forEach((extension) => extension.onPopulate?.(field));
-
-    if (field.fieldGroup) {
-      field.fieldGroup.forEach((f) => this._build(f));
-    }
-
-    this.getExtensions().forEach((extension) => extension.postPopulate?.(field));
-  }
-
-  private getExtensions() {
-    return Object.keys(this.config.extensions).map((name) => this.config.extensions[name]);
+    const extensions = Object.values(this.config.extensions);
+    extensions.forEach((extension) => extension.prePopulate?.(field));
+    extensions.forEach((extension) => extension.onPopulate?.(field));
+    field.fieldGroup?.forEach((f) => this._build(f));
+    extensions.forEach((extension) => extension.postPopulate?.(field));
   }
 
   private _setOptions(field: FormlyFieldConfigCache) {

src/ui/ng-zorro-antd/select/src/select.type.spec.ts

@@ -25,8 +25,7 @@ describe('ui-ng-zorro-antd: Select Type', () => {
     });
 
     expect(query('formly-wrapper-nz-form-field')).not.toBeNull();
-
-    query('nz-select').triggerEventHandler('click', {});
+    (query('nz-select').nativeElement as HTMLElement).click();
     fixture.autoDetectChanges();
     tick(500);
 
@@ -48,7 +47,7 @@ describe('ui-ng-zorro-antd: Select Type', () => {
 
     expect(query('formly-wrapper-nz-form-field')).not.toBeNull();
 
-    query('nz-select').triggerEventHandler('click', {});
+    (query('nz-select').nativeElement as HTMLElement).click();
     fixture.autoDetectChanges();
     tick(500);
 
@@ -66,11 +65,11 @@ describe('ui-ng-zorro-antd: Select Type', () => {
       },
     });
 
-    query('nz-select').triggerEventHandler('click', {});
+    (query('nz-select').nativeElement as HTMLElement).click();
     fixture.autoDetectChanges();
     tick(500);
 
-    query('nz-option-item').triggerEventHandler('click', {});
+    (query('nz-option-item').nativeElement as HTMLElement).click();
     fixture.detectChanges();
     tick(500);
     expect(field.formControl.value).toEqual(1);