error component can now infer current form from context

puzzle · Jan 14, 2025 · f1d851b · f1d851b
1 parent 8ad409b
commit f1d851b
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 19 deletions.
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
@@ -69,7 +69,6 @@ import { ApplicationTopBarComponent } from './components/application-top-bar/app
 import { A11yModule } from '@angular/cdk/a11y';
 import { CustomizationService } from './services/customization.service';
 import { MetricCheckInDirective } from './components/checkin/check-in-form-metric/metric-check-in-directive';
-import { ErrorComponent } from './shared/custom/error/error.component';
 
 function initOauthFactory(configService: ConfigService, oauthService: OAuthService) {
   return async() => {
@@ -171,8 +170,7 @@ export const MY_FORMATS = {
     CdkDrag,
     A11yModule,
     CdkDragHandle,
-    SharedModule,
-    ErrorComponent
+    SharedModule
   ],
   providers: [
     {

diff --git a/frontend/src/app/components/key-result-type/key-result-type.component.html b/frontend/src/app/components/key-result-type/key-result-type.component.html
@@ -41,9 +41,7 @@
               {{ "UNIT." + unit.value | translate }}
             </option>
           </select>
-
-          <app-error [form]="keyResultForm" [controlPath]="['metric', 'unit']"></app-error>
-
+          <app-error [controlPath]="['metric', 'unit']"></app-error>
         </div>
       </div>
     </div>
@@ -67,7 +65,7 @@
             {{ user.firstName + " " + user.lastName }}
           </mat-option>
         </mat-autocomplete>
-        <app-error [form]="keyResultForm" [controlPath]="['metric', 'owner']"></app-error>
+        <app-error [controlPath]="['metric', 'owner']"></app-error>
       </div>
     </div>
   </div>
@@ -86,7 +84,7 @@
             formControlName="baseline"
             id="baseline"
           />
-          <app-error [form]="keyResultForm" [controlPath]="['metric', 'baseline']"></app-error>
+          <app-error [controlPath]="['metric', 'baseline']"></app-error>
         </div>
       </div>
     </div>
@@ -102,7 +100,7 @@
             formControlName="targetGoal"
             id="target-goal"
           />
-          <app-error [form]="keyResultForm" [controlPath]="['metric', 'targetGoal']"></app-error>
+          <app-error [controlPath]="['metric', 'targetGoal']"></app-error>
 
         </div>
       </div>
@@ -119,8 +117,7 @@
             formControlName="stretchGoal"
             id="stretch-goal"
           />
-          <app-error [form]="keyResultForm" [controlPath]="['metric', 'stretchGoal']"></app-error>
-
+          <app-error [controlPath]="['metric', 'stretchGoal']"></app-error>
         </div>
       </div>
     </div>
@@ -141,7 +138,7 @@
             id="commit-zone"
             [attr.data-testId]="'commit-zone'"
           ></textarea>
-          <app-error [form]="keyResultForm" [controlPath]="['ordinal', 'commitZone']"></app-error>
+          <app-error [controlPath]="['ordinal', 'commitZone']"></app-error>
         </div>
       </div>
     </div>
@@ -157,7 +154,7 @@
             formControlName="targetZone"
             id="target-zone"
           ></textarea>
-          <app-error [form]="keyResultForm" [controlPath]="['ordinal', 'targetZone']"></app-error>
+          <app-error [controlPath]="['ordinal', 'targetZone']"></app-error>
         </div>
       </div>
     </div>
@@ -173,7 +170,7 @@
             formControlName="stretchZone"
             id="stretch-zone"
           ></textarea>
-          <app-error [form]="keyResultForm" [controlPath]="['ordinal','stretchZone']"></app-error>
+          <app-error [controlPath]="['ordinal','stretchZone']"></app-error>
         </div>
       </div>
     </div>

diff --git a/frontend/src/app/shared/custom/error/error.component.spec.ts b/frontend/src/app/shared/custom/error/error.component.spec.ts
@@ -5,6 +5,7 @@ import { TranslateTestingModule } from 'ngx-translate-testing';
 // @ts-ignore
 import * as de from '../../../../assets/i18n/de.json';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { FormGroupDirective } from '@angular/forms';
 
 describe('ErrorComponent', () => {
   let component: ErrorComponent;
@@ -13,7 +14,10 @@ describe('ErrorComponent', () => {
   beforeEach(async() => {
     await TestBed.configureTestingModule({
       declarations: [ErrorComponent],
-      providers: [TranslateService],
+      providers: [TranslateService,
+        FormGroupDirective,
+        { provide: FormGroupDirective,
+          useValue: new FormGroupDirective([], []) }],
       imports: [TranslateModule.forRoot(),
         TranslateTestingModule.withTranslations({
           de: de

diff --git a/frontend/src/app/shared/custom/error/error.component.ts b/frontend/src/app/shared/custom/error/error.component.ts
@@ -1,12 +1,14 @@
 import { Component, Input } from '@angular/core';
-import { FormGroup, ValidationErrors } from '@angular/forms';
+import { ControlContainer, FormGroup, FormGroupDirective, ValidationErrors } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-error',
   templateUrl: './error.component.html',
   styleUrl: './error.component.scss',
-  standalone: false
+  standalone: false,
+  viewProviders: [{ provide: ControlContainer,
+    useExisting: FormGroupDirective }]
 })
 export class ErrorComponent {
   @Input() form?: FormGroup;
@@ -16,12 +18,12 @@ export class ErrorComponent {
   @Input() name?: string;
 
 
-  constructor(private translate: TranslateService) {
+  constructor(private translate: TranslateService, private parentF: FormGroupDirective) {
   }
 
   getErrorMessages() {
     const displayName = this.name || this.controlPath[this.controlPath.length - 1];
-    let formField = this.form;
+    let formField = this.form || this.parentF.form;
     for (const key of this.controlPath) {
       formField = formField?.get(key) as FormGroup;
     }