deps: formly 6 update and necessary code adaptions

- update to "6.0.0-next.7" as a final Angular 13 compatible version is not yet available

BREAKING CHANGE: Formly 6 upgrade (see [upgrade from 5.0 to 6.0](https://github.com/ngx-formly/ngx-formly/blob/v6.0.0-next.7/UPGRADE-6.0.md) for more details).

package.json

@@ -74,7 +74,7 @@
     "@ngrx/store": "13.0.2",
     "@ngrx/store-devtools": "13.0.2",
     "@nguniversal/express-engine": "13.0.1",
-    "@ngx-formly/core": "^5.10.23",
+    "@ngx-formly/core": "^6.0.0-next.7",
     "@ngx-translate/core": "^14.0.0",
     "@ngx-translate/http-loader": "^7.0.0",
     "@rx-angular/state": "1.4.6",

src/app/extensions/captcha/exports/lazy-captcha/lazy-captcha.component.spec.ts

@@ -100,13 +100,15 @@ describe('Lazy Captcha Component', () => {
   });
 
   it('should throw an error if there is no control "captcha" in the given form', () => {
+    component.form = component.form as FormGroup;
     delete component.form.controls.captcha;
     expect(() => fixture.detectChanges()).toThrowErrorMatchingInlineSnapshot(
       `"form control 'captcha' does not exist in the given form for LazyCaptchaComponent"`
     );
   });
 
   it('should throw an error if there is no control "captchaAction" in the given form', () => {
+    component.form = component.form as FormGroup;
     delete component.form.controls.captchaAction;
     expect(() => fixture.detectChanges()).toThrowErrorMatchingInlineSnapshot(
       `"form control 'captchaAction' does not exist in the given form for LazyCaptchaComponent"`

src/app/extensions/captcha/exports/lazy-captcha/lazy-captcha.component.ts

@@ -10,7 +10,7 @@ import {
   ViewChild,
   ViewContainerRef,
 } from '@angular/core';
-import { AbstractControl, FormGroup, Validators } from '@angular/forms';
+import { AbstractControl, FormArray, FormGroup, Validators } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { switchMapTo, take, takeUntil } from 'rxjs/operators';
 
@@ -41,7 +41,7 @@ export class LazyCaptchaComponent implements OnInit, AfterViewInit, OnDestroy {
   /**
     form containing the captcha form controls
    */
-  @Input() form: FormGroup;
+  @Input() form: FormGroup | FormArray;
 
   /**
     css Class for rendering the captcha V2 control, default='offset-md-4 col-md-8'
@@ -85,7 +85,7 @@ export class LazyCaptchaComponent implements OnInit, AfterViewInit, OnDestroy {
           const moduleRef = createNgModuleRef(CaptchaV3ComponentModule, this.injector);
           const componentRef = this.anchor.createComponent(CaptchaV3Component, { ngModuleRef: moduleRef });
 
-          componentRef.instance.parentForm = this.form;
+          componentRef.instance.parentForm = this.form as FormGroup;
           componentRef.changeDetectorRef.markForCheck();
         } else if (version === 2) {
           this.formControl.setValidators([Validators.required]);
@@ -100,7 +100,7 @@ export class LazyCaptchaComponent implements OnInit, AfterViewInit, OnDestroy {
           const componentRef = this.anchor.createComponent(CaptchaV2Component, { ngModuleRef: moduleRef });
 
           componentRef.instance.cssClass = this.cssClass;
-          componentRef.instance.parentForm = this.form;
+          componentRef.instance.parentForm = this.form as FormGroup;
           componentRef.changeDetectorRef.markForCheck();
         }
       });

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

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

src/app/extensions/quickorder/shared/formly/quickorder-repeat-field/quickorder-repeat-field.component.html

@@ -19,7 +19,7 @@
   </div>
 </div>
 <div class="section d-flex flex-nowrap">
-  <a (click)="add(); updateContexts()" data-testing-id="add-quickorder-line">{{ to?.addText | translate }}</a>
+  <a (click)="addMultipleRows(1)" data-testing-id="add-quickorder-line">{{ to?.addText | translate }}</a>
   <span class="link-separator"></span>
   <a (click)="addMultipleRows(to?.numberMoreRows)">{{ to?.addMoreText | translate: { '0': to?.numberMoreRows } }}</a>
 </div>

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

@@ -48,12 +48,10 @@ describe('Quickorder Add Products Form Component', () => {
 
   it('should display form with add products configuration', () => {
     fixture.detectChanges();
-    expect(element.querySelectorAll('formly-field')).toMatchInlineSnapshot(`
-    NodeList [
-      <formly-field hide-deprecation=""
-      ><ish-quickorder-repeat-field></ish-quickorder-repeat-field
-    ></formly-field>,
-    ]
+    expect(element.querySelector('formly-field').querySelectorAll('formly-field')).toMatchInlineSnapshot(`
+      NodeList [
+        <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,9 @@ 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
+        .querySelector('div[data-testing-id=preferred-invoice-and-shipping-address] formly-field')
+        .querySelectorAll('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 +150,17 @@ 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
+        .querySelector('div[data-testing-id=preferred-invoice-address] formly-field')
+        .querySelectorAll('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
+        .querySelector('div[data-testing-id=preferred-shipping-address] formly-field')
+        .querySelectorAll('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

@@ -35,7 +35,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.querySelector('formly-field').querySelectorAll('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

@@ -38,7 +38,7 @@ describe('Account Profile Email Component', () => {
   it('should display 3 input fields for email, emailConfirmation and password', () => {
     fixture.detectChanges();
 
-    expect(element.querySelectorAll('formly-field')).toHaveLength(3);
+    expect(element.querySelector('formly-field').querySelectorAll('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

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

src/app/pages/checkout-review/formly/checkout-review-tac-field/checkout-review-tac-field.component.ts

@@ -1,15 +1,12 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { FormControl } from '@angular/forms';
-import { FieldType } from '@ngx-formly/core';
+import { FieldType, FieldTypeConfig } from '@ngx-formly/core';
 
 @Component({
   selector: 'ish-checkout-review-tac-field',
   templateUrl: './checkout-review-tac-field.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CheckoutReviewTacFieldComponent extends FieldType {
-  formControl: FormControl;
-
+export class CheckoutReviewTacFieldComponent extends FieldType<FieldTypeConfig> {
   getArgs() {
     return this.to.args ? this.to.args : {};
   }

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

@@ -48,23 +48,23 @@ describe('Checkout Shipping Component', () => {
 
   it('should render available shipping methods on page', () => {
     fixture.detectChanges();
-    expect(element.querySelectorAll('formly-field')).toHaveLength(1);
+    expect(element.querySelector('formly-field').querySelectorAll('formly-field')).toHaveLength(1);
   });
 
   it('should throw updateShippingMethod event when the user changes payment selection', () => {
     fixture.detectChanges();
 
     component.shippingForm.get('shippingMethod').setValue('testShipping');
 
-    verify(checkoutFacade.updateBasketShippingMethod(anything())).once();
+    verify(checkoutFacade.updateBasketShippingMethod(anything())).twice();
     const [arg] = capture(checkoutFacade.updateBasketShippingMethod).last();
     expect(arg).toMatchInlineSnapshot(`"testShipping"`);
   });
 
   it('should update basket if current shippingMethod is invalid', () => {
     when(checkoutFacade.getValidShippingMethod$()).thenReturn(of('other'));
     fixture.detectChanges();
-    verify(checkoutFacade.updateBasketShippingMethod(anything())).once();
+    verify(checkoutFacade.updateBasketShippingMethod(anything())).twice();
     const [arg] = capture(checkoutFacade.updateBasketShippingMethod).last();
     expect(arg).toMatchInlineSnapshot(`"other"`);
   });

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

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

src/app/pages/registration/formly/registration-address-field/registration-address-field.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
+import { FormGroup } from '@angular/forms';
 import { FieldType } from '@ngx-formly/core';
 
 @Component({
@@ -8,8 +8,6 @@ import { FieldType } from '@ngx-formly/core';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RegistrationAddressFieldComponent extends FieldType {
-  formControl: FormControl;
-
   get parent() {
     return this.form as FormGroup;
   }

src/app/pages/registration/formly/registration-tac-field/registration-tac-field.component.ts

@@ -1,12 +1,9 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { FormControl } from '@angular/forms';
-import { FieldType } from '@ngx-formly/core';
+import { FieldType, FieldTypeConfig } from '@ngx-formly/core';
 
 @Component({
   selector: 'ish-registration-tac-field',
   templateUrl: './registration-tac-field.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class RegistrationTacFieldComponent extends FieldType {
-  formControl: FormControl;
-}
+export class RegistrationTacFieldComponent extends FieldType<FieldTypeConfig> {}

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

@@ -64,12 +64,12 @@ describe('Registration Page Component', () => {
 
   it('should display form with registration configuration', () => {
     fixture.detectChanges();
-    expect(element.querySelectorAll('formly-field')).toMatchInlineSnapshot(`
+    expect(element.querySelector('formly-field').querySelectorAll('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/pages/registration/registration-page.component.ts

@@ -11,6 +11,7 @@ import {
   RegistrationConfigType,
   RegistrationFormConfigurationService,
 } from 'ish-core/services/registration-form-configuration/registration-form-configuration.service';
+import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
 
 /**
  * The Registration Page Container renders the customer registration form using the {@link RegistrationFormComponent}
@@ -56,6 +57,7 @@ export class RegistrationPageComponent implements OnInit {
 
   onCreate() {
     if (this.form.invalid) {
+      markAsDirtyRecursive(this.form);
       this.submitted = true;
       return;
     }

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

@@ -68,8 +68,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.querySelector('formly-field').querySelectorAll('formly-field')).toHaveLength(1);
+    expect(element.querySelector('formly-field').querySelector('formly-field').textContent).toMatchInlineSnapshot(`
       "SelectFieldComponent: costCenter ish-select-field {
         \\"label\\": \\"checkout.cost_center.select.label\\",
         \\"required\\": true,
@@ -81,7 +81,6 @@ describe('Basket Cost Center Selection Component', () => {
           }
         ],
         \\"placeholder\\": \\"\\",
-        \\"focus\\": false,
         \\"disabled\\": false
       }"
     `);
@@ -91,8 +90,8 @@ describe('Basket Cost Center Selection Component', () => {
     when(accountFacade.isBusinessCustomer$).thenReturn(of(true));
     when(checkoutFacade.eligibleCostCenterSelectOptions$()).thenReturn(of(mockCostCenterOptions));
     fixture.detectChanges();
-    expect(element.querySelectorAll('formly-field')).toHaveLength(1);
-    expect(element.querySelector('formly-field').textContent).toMatchInlineSnapshot(`
+    expect(element.querySelector('formly-field').querySelectorAll('formly-field')).toHaveLength(1);
+    expect(element.querySelector('formly-field').querySelector('formly-field').textContent).toMatchInlineSnapshot(`
       "SelectFieldComponent: costCenter ish-select-field {
         \\"label\\": \\"checkout.cost_center.select.label\\",
         \\"required\\": true,
@@ -108,7 +107,6 @@ describe('Basket Cost Center Selection Component', () => {
           }
         ],
         \\"placeholder\\": \\"account.option.select.text\\",
-        \\"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",
           ]