Merge pull request #1356 from bcgov/feature/ALCS-1579

Fixes for Decisions Components
bcgov · Jan 30, 2024 · 44be022 · 44be022
2 parents 17417bf + c83e18d
commit 44be022
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 37 deletions.
diff --git a/...put/decision-components/decision-component/incl-excl-input/incl-excl-input.component.html b/...put/decision-components/decision-component/incl-excl-input/incl-excl-input.component.html
@@ -1,37 +1,47 @@
-<form [formGroup]="form">
-  <div class="grid">
-    <mat-form-field appearance="outline">
-      <mat-label>ALR Area Impacted (ha)</mat-label>
-      <input
-        matInput
-        min="0.01"
-        mask="separator.5"
-        thousandSeparator=","
-        separatorLimit="9999999999"
-        formControlName="alrArea"
-        required
-      />
-    </mat-form-field>
+<ng-container *ngIf="form">
+  <form [formGroup]="form">
+    <div class="grid">
+      <mat-form-field appearance="outline">
+        <mat-label>ALR Area Impacted (ha)</mat-label>
+        <input
+          matInput
+          min="0.01"
+          mask="separator.5"
+          thousandSeparator=","
+          separatorLimit="9999999999"
+          formControlName="alrArea"
+          required
+        />
+      </mat-form-field>
 
-    <mat-form-field appearance="outline" class="date-picker">
-      <mat-label>Expiry Date</mat-label>
-      <input
-        matInput
-        (click)="expiryDatePicker.open()"
-        [matDatepicker]="expiryDatePicker"
-        formControlName="expiryDate"
-        name="date"
-      />
-      <mat-datepicker-toggle matSuffix [for]="expiryDatePicker"></mat-datepicker-toggle>
-      <mat-datepicker #expiryDatePicker type="date"></mat-datepicker>
-    </mat-form-field>
+      <mat-form-field appearance="outline" class="date-picker">
+        <mat-label>Expiry Date</mat-label>
+        <input
+          matInput
+          (click)="expiryDatePicker.open()"
+          [matDatepicker]="expiryDatePicker"
+          formControlName="expiryDate"
+          name="date"
+        />
+        <mat-datepicker-toggle matSuffix [for]="expiryDatePicker"></mat-datepicker-toggle>
+        <mat-datepicker #expiryDatePicker type="date"></mat-datepicker>
+      </mat-form-field>
 
-    <div class="full-width">
-      <mat-label class="toggle-label">Applicant Type*</mat-label>
-      <mat-button-toggle-group required id="isFirstNation" formControlName="applicantType" name="isFirstNation">
-        <mat-button-toggle value="Land Owner">Land Owner</mat-button-toggle>
-        <mat-button-toggle value="L/FNG Initiated">L/FNG Initiated</mat-button-toggle>
-      </mat-button-toggle-group>
+      <div class="full-width">
+        <mat-label class="toggle-label">Applicant Type*</mat-label>
+        <mat-button-toggle-group
+          required
+          id="isFirstNation"
+          formControlName="applicantType"
+          name="isFirstNation"
+          [ngClass]="{
+            'error-field-outlined': !form.controls['applicantType'].valid && form.controls['applicantType'].touched
+          }"
+        >
+          <mat-button-toggle value="Land Owner">Land Owner</mat-button-toggle>
+          <mat-button-toggle value="L/FNG Initiated">L/FNG Initiated</mat-button-toggle>
+        </mat-button-toggle-group>
+      </div>
     </div>
-  </div>
-</form>
+  </form>
+</ng-container>
diff --git a/...input/decision-components/decision-component/incl-excl-input/incl-excl-input.component.ts b/...input/decision-components/decision-component/incl-excl-input/incl-excl-input.component.ts
@@ -7,5 +7,5 @@ import { FormGroup } from '@angular/forms';
   styleUrls: ['./incl-excl-input.component.scss'],
 })
 export class InclExclInputComponent {
-  @Input() form!: FormGroup;
+  @Input() form?: FormGroup;
 }
diff --git a/...ecision-input/decision-components/decision-component/pfrs-input/pfrs-input.component.html b/...ecision-input/decision-components/decision-component/pfrs-input/pfrs-input.component.html
@@ -126,7 +126,7 @@
             matInput
             formControlName="areaToPlace"
           />
-          <span matTextSuffix>ha</span>
+          <span matTextSuffix>m<sup>2</sup></span>
         </mat-form-field>
       </div>
       <div class="label">

diff --git a/...ecision-input/decision-components/decision-component/pofo-input/pofo-input.component.html b/...ecision-input/decision-components/decision-component/pofo-input/pofo-input.component.html
@@ -62,7 +62,7 @@
         formControlName="areaToPlace"
         placeholder="Area*"
       />
-      <span matTextSuffix>ha</span>
+      <span matTextSuffix>m<sup>2</sup></span>
     </mat-form-field>
 
     <mat-form-field appearance="outline">