Fixed FormGroupDirctive issue (#2153)

* Fixed FormGroupDirctive issue

* Fix test

* Chore: bump version to 0.3.385 for build/infrastructure/eo/configuration.yaml

* Fix e2e test

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

build/infrastructure/eo/configuration.yaml

@@ -1,5 +1,5 @@
 name: eo-frontend-app
-version: 0.3.384
+version: 0.3.385
 repo: ghcr.io/energinet-datahub
 references:
   - file: k8s/energy-origin-apps/frontend/base/deployment.yaml

libs/dh/admin/feature-user-management/src/lib/tabs/users-tab/dh-users-tab.component.spec.ts

@@ -35,6 +35,7 @@ import {
 import { DhUsersTabComponent } from './dh-users-tab.component';
 import { searchDebounceTimeMs } from '@energinet-datahub/dh/shared/ui-search';
 import { WattToastService } from '@energinet-datahub/watt/toast';
+import { FormGroupDirective } from '@angular/forms';
 
 const users: MarketParticipantUserOverviewItemDto[] = [
   {
@@ -72,6 +73,7 @@ describe(DhUsersTabComponent, () => {
 
     const { fixture } = await render(DhUsersTabComponent, {
       imports: [getTranslocoTestingModule(), HttpClientModule, DhApiModule.forRoot()],
+      providers: [FormGroupDirective],
       componentProviders: [storeMock, toastServiceMock],
     });
 

libs/dh/charges/feature-prices/src/lib/dh-charges-prices.component.spec.ts

@@ -27,14 +27,15 @@ import { danishLocalProviders } from '@energinet-datahub/gf/configuration-danish
 import { danishTimeZoneIdentifier } from '@energinet-datahub/watt/datepicker';
 
 import { DhChargesPricesComponent } from './dh-charges-prices.component';
+import { FormGroupDirective } from '@angular/forms';
 
 const wattDrawerName = 'watt-drawer';
 const dateTimeFormat = 'dd-MM-yyyy';
 
 describe(DhChargesPricesComponent, () => {
   async function setup() {
     const { fixture } = await render(`<dh-charges-prices></dh-charges-prices>`, {
-      providers: [danishLocalProviders, danishDatetimeProviders],
+      providers: [danishLocalProviders, danishDatetimeProviders, FormGroupDirective],
       componentProviders: [
         {
           provide: DrawerDatepickerService,

libs/dh/charges/feature-prices/src/lib/drawer/charge-content/dh-charge-content.component.spec.ts

@@ -35,6 +35,7 @@ import { danishTimeZoneIdentifier } from '@energinet-datahub/watt/datepicker';
 import { danishLocalProviders } from '@energinet-datahub/gf/configuration-danish-locale';
 import { DhChargeContentComponent } from './dh-charge-content.component';
 import { DrawerDatepickerService } from './drawer-datepicker/drawer-datepicker.service';
+import { FormGroupDirective } from '@angular/forms';
 
 const dateTimeFormat = 'dd-MM-yyyy';
 
@@ -73,6 +74,7 @@ describe(DhChargeContentComponent, () => {
         DhMarketParticipantDataAccessApiStore,
         danishLocalProviders,
         danishDatetimeProviders,
+        FormGroupDirective,
       ],
       componentProviders: [
         {

libs/dh/market-participant/feature-edit-actor/src/lib/market-participant-edit-actor/contact-data/dh-market-participant-actor-contact-data.component.spec.ts

@@ -23,6 +23,7 @@ import { MarketParticipantActorContactDto } from '@energinet-datahub/dh/shared/d
 import { ActorContactChanges } from '@energinet-datahub/dh/market-participant/data-access-api';
 import { EventEmitter } from '@angular/core';
 import { getTranslocoTestingModule } from '@energinet-datahub/dh/shared/test-util-i18n';
+import { FormGroupDirective } from '@angular/forms';
 
 describe(DhMarketParticipantActorContactDataComponent, () => {
   async function setup(contacts: MarketParticipantActorContactDto[]) {
@@ -36,6 +37,7 @@ describe(DhMarketParticipantActorContactDataComponent, () => {
           remove: MarketParticipantActorContactDto[];
         }>,
       },
+      providers: [FormGroupDirective],
       imports: [getTranslocoTestingModule()],
     });
 

libs/dh/market-participant/feature-edit-actor/src/lib/market-participant-edit-actor/market-roles/dh-market-participant-actor-market-roles.component.spec.ts

@@ -28,6 +28,7 @@ import { EventEmitter } from '@angular/core';
 import { getTranslocoTestingModule } from '@energinet-datahub/dh/shared/test-util-i18n';
 import { DhMarketParticipantActorMarketRolesComponent } from './dh-market-participant-actor-market-roles.component';
 import { en } from '@energinet-datahub/dh/globalization/assets-localization';
+import { FormGroupDirective } from '@angular/forms';
 
 describe(DhMarketParticipantActorMarketRolesComponent, () => {
   async function setup(
@@ -45,6 +46,7 @@ describe(DhMarketParticipantActorMarketRolesComponent, () => {
           emit: outputFn,
         } as unknown as EventEmitter<MarketRoleChanges>,
       },
+      providers: [FormGroupDirective],
       imports: [getTranslocoTestingModule()],
     });
 

libs/dh/market-participant/feature-edit-actor/src/lib/market-participant-edit-actor/master-data/dh-market-participant-actor-master-data.component.spec.ts

@@ -22,6 +22,7 @@ import { ActorChanges } from '@energinet-datahub/dh/market-participant/data-acce
 import { getTranslocoTestingModule } from '@energinet-datahub/dh/shared/test-util-i18n';
 import { en } from '@energinet-datahub/dh/globalization/assets-localization';
 import { DhMarketParticipantActorMasterDataComponent } from './dh-market-participant-actor-master-data.component';
+import { FormGroupDirective } from '@angular/forms';
 
 describe(DhMarketParticipantActorMasterDataComponent, () => {
   async function setup(changes: ActorChanges) {
@@ -30,6 +31,7 @@ describe(DhMarketParticipantActorMasterDataComponent, () => {
         changes: changes,
       },
       imports: [getTranslocoTestingModule()],
+      providers: [FormGroupDirective],
     });
 
     return { view };

libs/dh/market-participant/feature-edit-organization/src/lib/market-participant-edit-organization/master-data/dh-market-participant-organization-master-data.component.spec.ts

@@ -23,13 +23,15 @@ import { getTranslocoTestingModule } from '@energinet-datahub/dh/shared/test-uti
 import { DhMarketParticipantOrganizationMasterDataComponent } from './dh-market-participant-organization-master-data.component';
 import { en } from '@energinet-datahub/dh/globalization/assets-localization';
 import { MarketParticipantOrganizationStatus } from '@energinet-datahub/dh/shared/domain';
+import { FormGroupDirective } from '@angular/forms';
 
 describe(DhMarketParticipantOrganizationMasterDataComponent, () => {
   async function setup(changes: OrganizationChanges) {
     const view = await render(DhMarketParticipantOrganizationMasterDataComponent, {
       componentProperties: {
         changes: changes,
       },
+      providers: [FormGroupDirective],
       imports: [getTranslocoTestingModule()],
     });
 

libs/dh/metering-point/feature-search/src/lib/dh-metering-point-search.component.spec.ts

@@ -34,6 +34,7 @@ import { getTranslocoTestingModule } from '@energinet-datahub/dh/shared/test-uti
 import { DhApiModule } from '@energinet-datahub/dh/shared/data-access-api';
 
 import { DhMeteringPointSearchComponent } from './dh-metering-point-search.component';
+import { FormGroupDirective } from '@angular/forms';
 
 @Component({
   template: `nothing to see here`,
@@ -44,6 +45,7 @@ describe(DhMeteringPointSearchComponent, () => {
   async function setup() {
     const { fixture } = await render(DhMeteringPointSearchComponent, {
       imports: [getTranslocoTestingModule(), DhApiModule.forRoot(), HttpClientModule],
+      providers: [FormGroupDirective],
       routes: [{ path: `:${dhMeteringPointIdParam}`, component: NoopComponent }],
     });
 

libs/dh/wholesale/feature-calculations/src/lib/calculations.cy.ts

@@ -28,6 +28,7 @@ import { graphQLProviders } from '@energinet-datahub/dh/shared/data-access-graph
 import { translocoProviders } from '@energinet-datahub/dh/globalization/configuration-localization';
 
 import { DhCalculationsComponent } from './calculations.component';
+import { FormGroupDirective } from '@angular/forms';
 
 const { calculations } = daTranslations.wholesale;
 
@@ -38,6 +39,7 @@ it('mounts', () => {
       graphQLProviders,
       translocoProviders,
       danishDatetimeProviders,
+      FormGroupDirective,
     ],
     imports: [
       ApolloModule,

libs/eo/connections/feature-invite-connection/invite-connection.component.ts

@@ -32,11 +32,13 @@ import { VaterStackComponent } from '@energinet-datahub/watt/vater';
 import { WattTextFieldTDComponent } from '@energinet-datahub/watt/text-field';
 
 import { EoInviteConnectionService } from '../data-access-api/invite-connection.service';
+import { FormGroupDirective } from '@angular/forms';
 
 @Component({
   selector: 'eo-invite-connection',
   standalone: true,
   encapsulation: ViewEncapsulation.None,
+  providers: [FormGroupDirective],
   imports: [
     NgIf,
     WATT_MODAL,

libs/eo/transfers/src/lib/eo-transfers.component.ts

@@ -35,6 +35,7 @@ import { EoTransfersStore } from './eo-transfers.store';
 import { EoTransfersTableComponent } from './eo-transfers-table.component';
 import { EoBetaMessageComponent } from '@energinet-datahub/eo/shared/atomic-design/ui-atoms';
 import { EoTransfersService } from './eo-transfers.service';
+import { FormGroupDirective } from '@angular/forms';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -49,6 +50,7 @@ import { EoTransfersService } from './eo-transfers.service';
     WattIconComponent,
     VaterStackComponent,
   ],
+  providers: [FormGroupDirective],
   standalone: true,
   template: `
     <eo-popup-message *ngIf="error$ | push"></eo-popup-message>

libs/watt/src/lib/components/dropdown/watt-dropdown.module.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 import { Component, DebugElement } from '@angular/core';
-import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormControl, FormGroupDirective, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
@@ -99,6 +99,7 @@ describe(WattDropdownComponent, () => {
       }
 
       const { fixture } = await render(TestComponent, {
+        providers: [FormGroupDirective],
         imports: [WattDropdownComponent, ReactiveFormsModule],
       });
 
@@ -330,6 +331,7 @@ describe(WattDropdownComponent, () => {
       }
 
       const { fixture } = await render(TestComponent, {
+        providers: [FormGroupDirective],
         imports: [WattDropdownComponent, FormsModule],
       });
 

libs/watt/src/lib/components/field/watt-field.component.ts

@@ -24,14 +24,14 @@ import {
   ViewEncapsulation,
   inject,
 } from '@angular/core';
-import { FormControl, FormGroupDirective, Validators } from '@angular/forms';
+import { ControlContainer, FormControl, FormGroupDirective, Validators } from '@angular/forms';
 
 @Component({
   selector: 'watt-field',
   standalone: true,
   imports: [NgIf, NgClass],
-  providers: [FormGroupDirective],
   encapsulation: ViewEncapsulation.None,
+  viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }],
   styleUrls: ['./watt-field.component.scss'],
   template: `
     <label [attr.for]="id ? id : null">

libs/watt/src/lib/components/picker/timepicker/watt-timepicker.module.spec.ts

@@ -16,7 +16,7 @@
  */
 import { Component } from '@angular/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormControl, FormGroupDirective, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { fireEvent, render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
 
@@ -47,7 +47,7 @@ describe(WattTimepickerComponent, () => {
     }
 
     const { fixture } = await render(TestComponent, {
-      providers: [danishLocalProviders, danishDatetimeProviders],
+      providers: [danishLocalProviders, danishDatetimeProviders, FormGroupDirective],
       imports: [WattTimepickerComponent, ReactiveFormsModule, FormsModule, BrowserAnimationsModule],
     });