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: valor-software/ngx-bootstrap#2581
azavea · Dec 22, 2017 · e71a31e · e71a31e
1 parent e863f7f
commit e71a31e
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 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
@@ -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
@@ -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, []],