deps: update formly to version 6 (#1291)

.eslintrc.json

@@ -182,7 +182,14 @@
         "dot-notation": "off", // disabled in favor of @typescript-eslint/dot-notation
         "eqeqeq": ["error", "always"],
         "etc/no-commented-out-code": "warn",
-        "etc/no-deprecated": "warn",
+        "etc/no-deprecated": [
+          "warn",
+          {
+            "ignored": {
+              "templateOptions|to|FormlyTemplateOptions|expressionProperties": "name" // deprecated formly methods are temporarily ignored
+            }
+          }
+        ],
         "id-blacklist": [
           "error",
           "any",

docs/guides/migrations.md

@@ -12,6 +12,10 @@ kb_sync_latest_only
 A styling adaption was made to the application shell to expand it to the full page height so the footer now always stays at the bottom.
 Together with that an inline style of the `main-container` was moved to the global styling definition.
 
+Formly has been upgraded from version 5 to 6.
+Find more information in the [Formly Upgrade Guide](https://github.com/ngx-formly/ngx-formly/blob/main/UPGRADE-6.0.md).
+We still use deprecated form properties like 'templateOptions' and 'expressionProperties' for compatibility reasons but we are going to replace them in the next major release.
+
 ## 3.0 to 3.1
 
 The SSR environment variable 'ICM_IDENTITY_PROVIDER' will be removed in a future release ( PWA 5.0 ).

package.json

@@ -82,7 +82,7 @@
     "@ngrx/store": "14.3.2",
     "@ngrx/store-devtools": "14.3.2",
     "@nguniversal/express-engine": "14.2.0",
-    "@ngx-formly/core": "^5.12.7",
+    "@ngx-formly/core": "^6.0.1",
     "@ngx-translate/core": "^14.0.0",
     "@rx-angular/state": "1.7.0",
     "@sentry/browser": "^7.14.1",

src/app/extensions/contact-us/pages/contact/contact-form/contact-form.component.spec.ts

@@ -46,7 +46,7 @@ describe('Contact Form Component', () => {
 
   it('should always render formly form', () => {
     fixture.detectChanges();
-    expect(element.querySelectorAll('formly-field')).toHaveLength(7);
+    expect(element.querySelectorAll('formly-group formly-field')).toHaveLength(7);
   });
 
   it('should not emit contact request when invalid form is submitted', () => {

src/app/extensions/quickorder/shared/direct-order/direct-order.component.spec.ts

@@ -51,13 +51,13 @@ describe('Direct Order Component', () => {
 
   it('should display form with direct order configuration', () => {
     fixture.detectChanges();
-    expect(element.querySelectorAll('formly-field')).toMatchInlineSnapshot(`
+    expect(element.querySelectorAll('formly-group formly-field')).toMatchInlineSnapshot(`
       NodeList [
-        <formly-field hide-deprecation=""
+        <formly-field
         ><ng-component
           >TextInputFieldComponent: sku ish-text-input-field { "fieldClass": "col-12", "placeholder":
           "shopping_cart.direct_order.item_placeholder", "attributes": { "autocomplete": "on" }, "label":
-          "", "focus": false, "disabled": false}</ng-component
+          "", "disabled": false}</ng-component
         ></formly-field
       >,
       ]

src/app/extensions/quickorder/shared/quickorder-add-products-form/quickorder-add-products-form.component.spec.ts

@@ -48,11 +48,9 @@ describe('Quickorder Add Products Form Component', () => {
 
   it('should display form with add products configuration', () => {
     fixture.detectChanges();
-    expect(element.querySelectorAll('formly-field')).toMatchInlineSnapshot(`
+    expect(element.querySelectorAll('formly-group formly-field')).toMatchInlineSnapshot(`
       NodeList [
-        <formly-field hide-deprecation=""
-        ><ish-quickorder-repeat-field></ish-quickorder-repeat-field
-      ></formly-field>,
+        <formly-field><ish-quickorder-repeat-field></ish-quickorder-repeat-field></formly-field>,
       ]
     `);
   });

src/app/pages/account-addresses/account-addresses/account-addresses.component.spec.ts

@@ -129,7 +129,7 @@ describe('Account Addresses Component', () => {
     expect(component.preferredAddressesEqual).toBeTruthy();
     expect(element.querySelector('div[data-testing-id=preferred-invoice-and-shipping-address]')).toBeTruthy();
     expect(
-      element.querySelectorAll('div[data-testing-id=preferred-invoice-and-shipping-address] formly-field')
+      element.querySelectorAll('div[data-testing-id=preferred-invoice-and-shipping-address] formly-group formly-field')
     ).toHaveLength(2);
     expect(element.querySelector('div[data-testing-id=preferred-invoice-address]')).toBeFalsy();
     expect(element.querySelector('div[data-testing-id=preferred-shipping-address]')).toBeFalsy();
@@ -148,9 +148,13 @@ describe('Account Addresses Component', () => {
 
     expect(element.querySelector('div[data-testing-id=preferred-invoice-and-shipping-address]')).toBeFalsy();
     expect(element.querySelector('div[data-testing-id=preferred-invoice-address]')).toBeTruthy();
-    expect(element.querySelectorAll('div[data-testing-id=preferred-invoice-address] formly-field')).toHaveLength(1);
+    expect(
+      element.querySelectorAll('div[data-testing-id=preferred-invoice-address] formly-group formly-field')
+    ).toHaveLength(1);
     expect(element.querySelector('div[data-testing-id=preferred-shipping-address]')).toBeTruthy();
-    expect(element.querySelectorAll('div[data-testing-id=preferred-shipping-address] formly-field')).toHaveLength(1);
+    expect(
+      element.querySelectorAll('div[data-testing-id=preferred-shipping-address] formly-group formly-field')
+    ).toHaveLength(1);
   });
 
   it('should not display further addresses if only preferred invoice and shipping addresses are available', () => {

src/app/pages/account-profile-company/account-profile-company/account-profile-company.component.spec.ts

@@ -54,7 +54,7 @@ describe('Account Profile Company Component', () => {
 
   it('should display 3 input fields for companyName, companyName2 and taxationID', () => {
     fixture.detectChanges();
-    expect(element.querySelectorAll('formly-field')).toHaveLength(3);
+    expect(element.querySelectorAll('formly-group formly-field')).toHaveLength(3);
   });
 
   it('should emit updateCompanyProfile event if form is valid', () => {

src/app/pages/account-profile-email/account-profile-email/account-profile-email.component.spec.ts

@@ -39,7 +39,7 @@ describe('Account Profile Email Component', () => {
   it('should display 3 input fields for email, emailConfirmation and password', () => {
     fixture.detectChanges();
 
-    expect(element.querySelectorAll('formly-group formly-field')).toHaveLength(3);
+    expect(element.querySelectorAll('formly-group formly-group formly-field')).toHaveLength(3);
   });
 
   it('should emit updateEmail event if form is valid', () => {

src/app/pages/account-profile-password/account-profile-password/account-profile-password.component.spec.ts

@@ -35,7 +35,7 @@ describe('Account Profile Password Component', () => {
 
   it('should display 3 input fields for oldPassword, password and passwordConfirmation', () => {
     fixture.detectChanges();
-    expect(element.querySelectorAll('formly-group formly-field')).toHaveLength(3);
+    expect(element.querySelectorAll('formly-group formly-group formly-field')).toHaveLength(3);
   });
 
   it('should emit updatePassword event if form is valid', () => {

src/app/pages/checkout-shipping/checkout-shipping/checkout-shipping.component.spec.ts

@@ -48,7 +48,7 @@ describe('Checkout Shipping Component', () => {
 
   it('should render available shipping methods on page', () => {
     fixture.detectChanges();
-    expect(element.querySelectorAll('formly-field')).toHaveLength(1);
+    expect(element.querySelectorAll('formly-group formly-field')).toHaveLength(1);
   });
 
   it('should throw updateShippingMethod event when the user changes payment selection', () => {

src/app/pages/registration/registration-page.component.spec.ts

@@ -63,12 +63,12 @@ describe('Registration Page Component', () => {
 
   it('should display form with registration configuration', () => {
     fixture.detectChanges();
-    expect(element.querySelectorAll('formly-field')).toMatchInlineSnapshot(`
+    expect(element.querySelectorAll('formly-group formly-field')).toMatchInlineSnapshot(`
       NodeList [
-        <formly-field hide-deprecation=""
+        <formly-field
         ><ng-component
-          >TextInputFieldComponent: test ish-text-input-field { "label": "", "placeholder": "", "focus":
-          false, "disabled": false}</ng-component
+          >TextInputFieldComponent: test ish-text-input-field { "label": "", "placeholder": "",
+          "disabled": false}</ng-component
         ></formly-field
       >,
       ]

src/app/shared/components/basket/basket-cost-center-selection/basket-cost-center-selection.component.spec.ts

@@ -71,8 +71,8 @@ describe('Basket Cost Center Selection Component', () => {
       when(checkoutFacade.eligibleCostCenterSelectOptions$()).thenReturn(of([mockCostCenterOptions[0]]));
       fixture.detectChanges();
 
-      expect(element.querySelectorAll('formly-field')).toHaveLength(1);
-      expect(element.querySelector('formly-field').textContent).toMatchInlineSnapshot(`
+      expect(element.querySelectorAll('formly-group formly-field')).toHaveLength(1);
+      expect(element.querySelector('formly-group formly-field').textContent).toMatchInlineSnapshot(`
         "SelectFieldComponent: costCenter ish-select-field {
           \\"label\\": \\"checkout.cost_center.select.label\\",
           \\"required\\": true,
@@ -84,7 +84,6 @@ describe('Basket Cost Center Selection Component', () => {
             }
           ],
           \\"placeholder\\": \\"\\",
-          \\"focus\\": false,
           \\"disabled\\": false
         }"
       `);
@@ -93,8 +92,8 @@ describe('Basket Cost Center Selection Component', () => {
     it('should be rendered with correct options and placeholder for multiple cost center options', () => {
       when(checkoutFacade.eligibleCostCenterSelectOptions$()).thenReturn(of(mockCostCenterOptions));
       fixture.detectChanges();
-      expect(element.querySelectorAll('formly-field')).toHaveLength(1);
-      expect(element.querySelector('formly-field').textContent).toMatchInlineSnapshot(`
+      expect(element.querySelectorAll('formly-group formly-field')).toHaveLength(1);
+      expect(element.querySelector('formly-group formly-field').textContent).toMatchInlineSnapshot(`
         "SelectFieldComponent: costCenter ish-select-field {
           \\"label\\": \\"checkout.cost_center.select.label\\",
           \\"required\\": true,
@@ -110,7 +109,6 @@ describe('Basket Cost Center Selection Component', () => {
             }
           ],
           \\"placeholder\\": \\"account.option.select.text\\",
-          \\"focus\\": false,
           \\"disabled\\": false
         }"
       `);
@@ -125,8 +123,8 @@ describe('Basket Cost Center Selection Component', () => {
       subject$.next({ ...BasketMockData.getBasket(), costCenter: '2' });
       fixture.detectChanges();
 
-      expect(element.querySelectorAll('formly-field')).toHaveLength(1);
-      expect(element.querySelector('formly-field').textContent).toMatchInlineSnapshot(`
+      expect(element.querySelectorAll('formly-group formly-field')).toHaveLength(1);
+      expect(element.querySelector('formly-group formly-field').textContent).toMatchInlineSnapshot(`
         "SelectFieldComponent: costCenter ish-select-field {
           \\"label\\": \\"checkout.cost_center.select.label\\",
           \\"required\\": true,
@@ -142,7 +140,6 @@ describe('Basket Cost Center Selection Component', () => {
             }
           ],
           \\"placeholder\\": \\"\\",
-          \\"focus\\": false,
           \\"disabled\\": false
         }"
       `);

src/app/shared/components/checkout/basket-shipping-address-widget/basket-shipping-address-widget.component.spec.ts

@@ -90,6 +90,8 @@ describe('Basket Shipping Address Widget Component', () => {
           "ish-address",
           "formly-form",
           "formly-field",
+          "formly-group",
+          "formly-field",
           "ng-component",
           "ish-formly-customer-address-form",
         ]
@@ -114,6 +116,8 @@ describe('Basket Shipping Address Widget Component', () => {
           "ish-address",
           "formly-form",
           "formly-field",
+          "formly-group",
+          "formly-field",
           "ng-component",
           "ish-formly-customer-address-form",
         ]
@@ -141,6 +145,8 @@ describe('Basket Shipping Address Widget Component', () => {
           Array [
             "formly-form",
             "formly-field",
+            "formly-group",
+            "formly-field",
             "ng-component",
             "ish-formly-customer-address-form",
           ]
@@ -163,6 +169,8 @@ describe('Basket Shipping Address Widget Component', () => {
           Array [
             "formly-form",
             "formly-field",
+            "formly-group",
+            "formly-field",
             "ng-component",
             "ish-formly-customer-address-form",
           ]

src/app/shared/formly/extensions/translate-placeholder.extension.ts

@@ -23,10 +23,6 @@ class TranslatePlaceholderExtension implements FormlyExtension {
       of(to.placeholder).pipe(delay(1000))
     ).subscribe(translation => {
       field.templateOptions.placeholder = translation;
-      // trigger formly change detection
-      if (field.options) {
-        field.options.resetModel();
-      }
     });
   }
 }

src/app/shared/formly/field-library/library-config-replacement.extension.ts

@@ -16,12 +16,15 @@ class LibraryConfigReplacementExtension implements FormlyExtension {
   private configIds: Set<string>;
 
   prePopulate(field: FormlyFieldConfig): void {
-    const configId = new RegExp(/^#(.+)$/).exec(field.type)?.[1];
-    if (this.configIds.has(configId)) {
-      const override = omit(field, 'type');
-      const config = this.fieldLibrary.getConfiguration(configId, override);
-      // eslint-disable-next-line ban/ban
-      Object.assign(field, config);
+    if (typeof field.type === 'string') {
+      const configId = new RegExp(/^#(.+)$/).exec(field.type)?.[1];
+      if (this.configIds.has(configId)) {
+        const override = omit(field, 'type');
+        const config = this.fieldLibrary.getConfiguration(configId, override);
+        // eslint-disable-next-line ban/ban
+        Object.assign(field, config);
+        field.templateOptions = config.templateOptions;
+      }
     }
   }
 }

src/app/shared/formly/types/select-field/select-field.component.html

@@ -7,12 +7,10 @@
   [attr.data-testing-id]="field.key"
 >
   <ng-container *ngIf="selectOptions && selectOptions | formlySelectOptions: field | async as opts">
-    <ng-container *ngIf="to._flatOptions">
-      <ng-container *ngFor="let opt of opts">
-        <option [value]="opt.value" [disabled]="opt.disabled">
-          {{ opt.label }}
-        </option>
-      </ng-container>
+    <ng-container *ngFor="let opt of opts">
+      <option [value]="opt.value" [disabled]="opt.disabled">
+        {{ opt.label }}
+      </option>
     </ng-container>
   </ng-container>
 </select>