From e71a31eb2b7f471b1b898a80b537b5825ad5977d Mon Sep 17 00:00:00 2001
From: CloudNiner <andrew@cloudniner.co>
Date: Fri, 22 Dec 2017 15:28:08 -0500
Subject: [PATCH] Directly update freq/intensity form controls

The ngx-bootstrap button group btnRadio directive
is busted for reactive forms, so we just implement
directly with events for now instead:

https://github.com/valor-software/ngx-bootstrap/issues/2581
---
 .../steps/hazard-step.component.html          | 22 ++++++++++---------
 .../steps/hazard-step.component.ts            |  8 ++++++-
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/angular/planit/src/app/risk-wizard/steps/hazard-step.component.html b/src/angular/planit/src/app/risk-wizard/steps/hazard-step.component.html
index 69e45b35d..735534526 100644
--- a/src/angular/planit/src/app/risk-wizard/steps/hazard-step.component.html
+++ b/src/angular/planit/src/app/risk-wizard/steps/hazard-step.component.html
@@ -23,21 +23,23 @@ <h5>Probability</h5>
     <div class="step-form-control">
       <h5>Frequency <span class="icon icon-question-circle-o"></span></h5>
       <div class="btn-group">
-        <label class="btn btn-primary"
-               [ngClass]="{active: form.controls.frequency.value == opt}"
-               *ngFor="let opt of directionalOptionsKeys"
-               btnRadio="{{ opt }}"
-               formControlName="frequency">{{ directionalOptions.get(opt)?.label }}</label>
+        <button class="btn btn-primary"
+                [ngClass]="{active: form.controls.frequency.value === opt}"
+                *ngFor="let opt of directionalOptionsKeys"
+                (click)="updateDirectionalControl(form.controls.frequency, opt)">
+          {{ directionalOptions.get(opt)?.label }}
+        </button>
       </div>
     </div>
     <div class="step-form-control">
       <h5>Intensity <span class="icon icon-question-circle-o"></span></h5>
       <div class="btn-group">
-        <label class="btn btn-primary"
-               [ngClass]="{active: form.controls.intensity.value == opt}"
-               *ngFor="let opt of directionalOptionsKeys"
-               btnRadio="{{ opt }}"
-               formControlName="intensity">{{ directionalOptions.get(opt)?.label }}</label>
+        <button class="btn btn-primary"
+                [ngClass]="{active: form.controls.intensity.value === opt}"
+                *ngFor="let opt of directionalOptionsKeys"
+                (click)="updateDirectionalControl(form.controls.intensity, opt)">
+          {{ directionalOptions.get(opt)?.label }}
+        </button>
       </div>
     </div>
   </form>
diff --git a/src/angular/planit/src/app/risk-wizard/steps/hazard-step.component.ts b/src/angular/planit/src/app/risk-wizard/steps/hazard-step.component.ts
index 589311941..59942e402 100644
--- a/src/angular/planit/src/app/risk-wizard/steps/hazard-step.component.ts
+++ b/src/angular/planit/src/app/risk-wizard/steps/hazard-step.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 
 import {
   OrgRiskDirectionalOption,
@@ -46,6 +46,7 @@ export class HazardStepComponent extends WizardStepComponent<Risk> implements On
     super.ngOnInit();
     this.risk = this.session.getData() || new Risk({});
     this.setupForm(this.fromModel(this.risk));
+    this.form.get('intensity').valueChanges.subscribe(v => console.log('intensity: ', v));
   }
 
   save() {
@@ -57,6 +58,11 @@ export class HazardStepComponent extends WizardStepComponent<Risk> implements On
     this.session.setDataForKey(this.key, data);
   }
 
+  updateDirectionalControl(control: FormControl, value: OrgRiskDirectionalOption) {
+    control.setValue(value);
+    control.markAsDirty();
+  }
+
   setupForm(data: HazardStepFormModel) {
     this.form = this.fb.group({
       'frequency': [data.frequency, []],