refactor: type common input (#1500)

dasch-swiss · Mar 4, 2024 · 860a430 · 860a430
1 parent 9920587
commit 860a430
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 27 deletions.
diff --git a/apps/dsp-app/src/app/main/action/login-form/login-form.component.ts b/apps/dsp-app/src/app/main/action/login-form/login-form.component.ts
@@ -1,6 +1,6 @@
 import { Location } from '@angular/common';
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { UntypedFormBuilder, Validators } from '@angular/forms';
+import { FormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { NotificationService } from '@dasch-swiss/vre/shared/app-notification';
 import { AuthService } from '@dasch-swiss/vre/shared/app-session';
@@ -12,19 +12,18 @@ import { finalize, takeLast, tap } from 'rxjs/operators';
   template: `
     <form [formGroup]="form" (ngSubmit)="login()" class="login-form">
       <app-common-input
-        [formGroup]="form"
-        controlName="username"
+        [control]="form.controls.username"
         placeholder="Username"
         data-cy="username-input"></app-common-input>
 
       <mat-form-field data-cy="password-input">
         <input
           placeholder="Password"
           autocomplete="current-password"
-          formControlName="password"
+          [formControl]="form.controls.password"
           matInput
           type="password" />
-        <mat-error *ngIf="form.get('password').errors as errors">
+        <mat-error *ngIf="form.controls.password.errors as errors">
           {{ errors | humanReadableError }}
         </mat-error>
       </mat-form-field>
@@ -63,7 +62,7 @@ export class LoginFormComponent implements OnInit, OnDestroy {
   private subscription: Subscription;
 
   constructor(
-    private _fb: UntypedFormBuilder,
+    private _fb: FormBuilder,
     private router: Router,
     private _authService: AuthService,
     private route: ActivatedRoute,

diff --git a/apps/dsp-app/src/app/project/common-input/common-input.component.ts b/apps/dsp-app/src/app/project/common-input/common-input.component.ts
@@ -1,29 +1,22 @@
 import { Component, Input } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
+import { FormControl } from '@angular/forms';
 
 @Component({
   selector: 'app-common-input',
   template: `
     <mat-form-field style="width: 100%">
       <mat-icon matIconPrefix *ngIf="prefixIcon">{{ prefixIcon }}</mat-icon>
-      <input matInput [placeholder]="placeholder" [formControl]="formControl" />
-      <mat-error *ngIf="formControl.errors as errors">
+      <input matInput [placeholder]="placeholder" [formControl]="control" />
+      <mat-error *ngIf="control.errors as errors">
         {{ errors | humanReadableError: validatorErrors }}
       </mat-error>
     </mat-form-field>
   `,
   styles: [':host { display: block;}'],
 })
 export class CommonInputComponent {
-  @Input() formGroup: FormGroup;
-  @Input() controlName: string;
+  @Input() control: FormControl<string>;
   @Input() placeholder: string;
   @Input() prefixIcon: string | null = null;
   @Input() validatorErrors: { errorKey: string; message: string }[] | null = null;
-
-  get formControl() {
-    return this.formGroup.controls[this.controlName] as FormControl;
-  }
-
-  protected readonly FormGroup = FormGroup;
 }
diff --git a/apps/dsp-app/src/app/project/ontology/resource-class-form/resource-class-form.component.ts b/apps/dsp-app/src/app/project/ontology/resource-class-form/resource-class-form.component.ts
@@ -18,8 +18,7 @@ import { ResourceClassForm } from './resource-class-form.type';
       <app-common-input
         class="name-input"
         data-cy="name-input"
-        [formGroup]="form"
-        controlName="name"
+        [control]="form.controls.name"
         placeholder="Class name *"
         prefixIcon="fingerprint"></app-common-input>
 

diff --git a/apps/dsp-app/src/app/project/reusable-project-form/reusable-project-form.component.ts b/apps/dsp-app/src/app/project/reusable-project-form/reusable-project-form.component.ts
@@ -14,26 +14,23 @@ import { shortcodeExistsValidator } from './shortcode-exists.validator';
     <form *ngIf="form" [formGroup]="form">
       <div style="display: flex">
         <app-common-input
-          [formGroup]="form"
-          controlName="shortcode"
+          [control]="form.controls.shortcode"
           [placeholder]="'appLabels.form.project.general.shortcode' | translate"
           [validatorErrors]="[shortcodePatternError, shortCodeExistsError]"
           data-cy="shortcode-input"
           style="flex: 1; margin-right: 16px"></app-common-input>
 
         <app-common-input
-          [formGroup]="form"
-          controlName="shortname"
+          [control]="form.controls.shortname"
           [placeholder]="'appLabels.form.project.general.shortname' | translate"
           data-cy="shortname-input"
           style="flex: 1"></app-common-input>
       </div>
 
       <app-common-input
         [placeholder]="'appLabels.form.project.general.longname' | translate"
-        controlName="longname"
-        data-cy="longname-input"
-        [formGroup]="form"></app-common-input>
+        [control]="form.controls.longname"
+        data-cy="longname-input"></app-common-input>
 
       <dasch-swiss-multi-language-textarea
         [placeholder]="('appLabels.form.project.general.description' | translate) + '*'"
@@ -42,7 +39,10 @@ import { shortcodeExistsValidator } from './shortcode-exists.validator';
         data-cy="description-input">
       </dasch-swiss-multi-language-textarea>
 
-      <app-chip-list-input [formGroup]="form" controlName="keywords" data-cy="keywords-input" editable="true">
+      <app-chip-list-input
+        [formGroup]="form"
+        controlName="keywords"
+        data-cy="keywords-input"
         [validators]="keywordsValidators">
       </app-chip-list-input>
     </form>