add Input validation for new organizations

digital-sustainability · Mar 14, 2024 · 3a3f7cd · 3a3f7cd
1 parent 9ff4eb1
commit 3a3f7cd
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 11 deletions.
diff --git a/frontend/src/app/institution-popup/institution-popup.component.html b/frontend/src/app/institution-popup/institution-popup.component.html
@@ -37,20 +37,22 @@
       </small>
     </div>
 
+    <div class="input-box">
+      <mat-label>Timestamp</mat-label>
+      <input type="text" placeholder="null" formControlName="ts" />
+    </div>
+
 
     <div class="input-box orgs" formArrayName="orgs">
       <h4>Add Organization(s)</h4>
-      <div class="column" *ngFor="let control of reactiveForm.get('orgs')['controls']; let i =index">
-        <mat-label>Sector</mat-label>
-        <input type="text" 
-          placeholder="e.g.Tecan Genomics"
-          [formControlName]="i">
+      <div class="column" *ngFor="let control of reactiveForm.get('orgs')['controls']; let i =index" [formGroupName]="i">
+          <input type="text" placeholder="e.g.Tecan Genomics" formControlName="name"/>
+          <input type="text" placeholder="null" formControlName="ts_org"/>
         <button type="button" class="btn-add-delete" (click)="DeleteOrg(i)">
           Delete
         </button>
       </div>
-
-      </div>
+    </div>
       <button type="button" class="btn-add-delete" (click)="AddOrg()">
         Add Organization
       </button>

diff --git a/frontend/src/app/institution-popup/institution-popup.component.scss b/frontend/src/app/institution-popup/institution-popup.component.scss
@@ -55,6 +55,7 @@
     font-weight: 400;
     margin-top: 30px;
     border: none;
+    border-radius: 5px;
     cursor: pointer;
     transition: all 0.2s ease;
     background: #888;
@@ -89,9 +90,11 @@
     margin: 10px 0px;
     padding: 14px 30px;
     border-radius: 5px;
-    background: #6e6e6e;
+    background: #888;
     border: none;
+    cursor: pointer;
     color: white;
+
   }
   .form .btn-add-delete:hover {
     background: #555;

diff --git a/frontend/src/app/institution-popup/institution-popup.component.ts b/frontend/src/app/institution-popup/institution-popup.component.ts
@@ -21,7 +21,12 @@ export class InstitutionPopupComponent implements OnInit{
         Validators.pattern('^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$')]),
       sector: new FormControl(null, Validators.required),
       ts: new FormControl(null),
-      orgs: new FormArray([]),
+      orgs: new FormArray([
+        new FormGroup({
+        name: new FormControl(null, [Validators.required]),
+        ts_org: new FormControl(null),
+      })
+      ]),
     })
 
     this.reactiveForm.statusChanges.subscribe((status) => {
@@ -40,13 +45,21 @@ export class InstitutionPopupComponent implements OnInit{
       uuid: null,
       sector: null,
       ts: null,
-      orgs: [],
+      orgs: [{
+        name: null,
+        ts_org: null,
+      }],
     });
   }
 
   AddOrg(){
     (<FormArray>this.reactiveForm.get('orgs'))
-      .push(new FormControl(null, Validators.required));
+      .push(
+        new FormGroup({
+        name: new FormControl(null, [Validators.required]),
+        ts_org: new FormControl(null),
+        })
+      );
   }
 
   DeleteOrg(index: number){