update instructions.

frontend/src/app/pages/resource-creator/resource-creator.component.html

@@ -2,14 +2,13 @@
   <div class="container">
     <div class="az-content-body pd-lg-l-40 d-flex flex-column">
       <div class="az-content-breadcrumb">
-        <span>Components</span>
-        <span>Forms</span>
-        <span>Form Elements</span>
+        <span>Create Record</span>
+        <span>Condition</span>
       </div>
-      <h2 class="az-content-title">Create a Record</h2>
+      <h2 class="az-content-title">Condition Wizard</h2>
 
       <!-- Editor Button -->
-      <div class="row mt-5 mb-3">
+      <div class="row">
         <div class="col-12">
 
           <div class="alert alert-warning" role="alert">
@@ -27,16 +26,17 @@ <h2 class="az-content-title">Create a Record</h2>
         </div>
       </div>
 
-      <p>While Fasten Health is designed to pull your health records automatically from your healthcare institutions, in some cases you may be unable to do so due to various limitations:</p>
+
+      <p>Fasten Health is meant to automatically retrieve your health records from your healthcare providers. However, you might face limitations in these situations:</p>
       <ul>
-        <li>Your healthcare institution is unsupported</li>
-        <li>Your records are too old and no longer exist in the system</li>
-        <li>You have additional information you'd like to associate with your medical condition (Imaging Results, Notes, etc)</li>
+        <li>Your healthcare provider isn't supported.</li>
+        <li>Your records are too old and no longer available in the system.</li>
+        <li>You want to include extra information related to your medical condition, like imaging results or notes.</li>
       </ul>
 
-      <p>In such cases, you can use this form to manually add records to Fasten.</p>
+      <p>If any of these apply to you, you can use this form to manually input your records into Fasten.</p>
 
-      <div class="az-content-label mg-b-5">Condition</div>
+      <div class="az-content-label mg-t-2 mg-b-5">Condition</div>
       <p class="mg-b-20">
         A condition is a disease, illness, or injury that needs to be managed over time. A condition may be a comorbidity (a co-occurring condition), or it may be a main diagnosis.
       </p>
@@ -465,6 +465,14 @@ <h6 class="card-title">Notes & Attachments</h6>
           </div>
         </div>
 
+        <div *ngIf="!form.valid" class="row">
+          <div class="col-12">
+            <ul>
+              <li *ngFor="let error of errors" class="text-danger">{{error.controlName}} {{error.errorName}} {{error.errorValue}}</li>
+            </ul>
+          </div>
+        </div>
+
         <button  class="mg-t-20 mg-b-20 btn btn-az-primary btn-rounded btn-block " type="submit">Submit</button>
       </form>
 

frontend/src/app/pages/resource-creator/resource-creator.component.ts

@@ -1,5 +1,5 @@
 import {Component, Input, OnInit} from '@angular/core';
-import {AbstractControl, FormArray, FormControl, FormGroup, Validators} from '@angular/forms';
+import {AbstractControl, FormArray, FormControl, FormGroup, ValidationErrors, Validators} from '@angular/forms';
 import { ModalDismissReasons, NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import {
   ResourceCreateAttachment,
@@ -27,6 +27,12 @@ export enum ContactType {
   ContactTypeManual = 'manual',
 }
 
+interface FormValidationErrors {
+  controlName: string;
+  errorName: string;
+  errorValue: any;
+}
+
 @Component({
   selector: 'app-resource-creator',
   templateUrl: './resource-creator.component.html',
@@ -36,6 +42,7 @@ export class ResourceCreatorComponent implements OnInit {
   debugMode = false;
   collapsePanel: {[name: string]: boolean} = {}
 
+  public errors: FormValidationErrors[] = [];
 
   @Input() form!: FormGroup;
   get isValid() { return true; }
@@ -80,8 +87,42 @@ export class ResourceCreatorComponent implements OnInit {
 
     this.resetOrganizationForm()
     // this.resetPractitionerForm()
+
+    this.form.valueChanges.subscribe(() => {
+      this.errors = [];
+      this.calculateErrors(this.form);
+    });
   }
 
+  calculateErrors(form: FormGroup | FormArray) {
+    Object.keys(form.controls).forEach(field => {
+      const control = form.get(field);
+      if (control instanceof FormGroup || control instanceof FormArray) {
+        this.errors = this.errors.concat(this.calculateErrors(control));
+        return;
+      }
+
+      const controlErrors: ValidationErrors = control.errors;
+      if (controlErrors !== null) {
+        Object.keys(controlErrors).forEach(keyError => {
+          console.log("Found Error", field, keyError, controlErrors[keyError], controlErrors);
+          this.errors.push({
+            controlName: field,
+            errorName: keyError,
+            errorValue: controlErrors[keyError]
+          });
+        });
+      }
+    });
+
+    // This removes duplicates
+    this.errors = this.errors.filter((error, index, self) => self.findIndex(t => {
+      return t.controlName === error.controlName && t.errorName === error.errorName;
+    }) === index);
+    return this.errors;
+  }
+
+
   get medications(): FormArray {
     return this.form.controls["medications"] as FormArray;
   }
@@ -216,16 +257,15 @@ export class ResourceCreatorComponent implements OnInit {
       let bundle = GenerateR4Bundle(this.form.getRawValue());
 
       let bundleJsonStr = JSON.stringify(bundle);
-      let bundleBlob = new Blob([bundleJsonStr], { type: 'application/json' });
-      let bundleFile = new File([ bundleBlob ], 'bundle.json');
+      let bundleBlob = new Blob([bundleJsonStr], {type: 'application/json'});
+      let bundleFile = new File([bundleBlob], 'bundle.json');
       this.fastenApi.createManualSource(bundleFile).subscribe((resp) => {
         console.log(resp)
         this.router.navigate(['/medical-history'])
       })
-
+    } else {
+      this.calculateErrors(this.form);
     }
-
-
   }
 
   //Modal Helpers