refactor: making radio forms compatible with forms (hypertrace#1314)

Author: anandtiwary

projects/components/src/radio/radio-group.component.ts

@@ -1,11 +1,19 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output, TemplateRef } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { MatRadioChange } from '@angular/material/radio';
 import { LoggerService } from '@hypertrace/common';
 import { RadioOption } from './radio-option';
 
 @Component({
   selector: 'ht-radio-group',
   styleUrls: ['./radio-group.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: RadioGroupComponent,
+      multi: true
+    }
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <ht-label *ngIf="this.title" class="title" [label]="this.title"></ht-label>
@@ -34,7 +42,7 @@ import { RadioOption } from './radio-option';
     <ng-template #defaultLabel let-label><ht-label class="radio-button-label" [label]="label"></ht-label></ng-template>
   `
 })
-export class RadioGroupComponent implements OnInit {
+export class RadioGroupComponent implements ControlValueAccessor, OnInit {
   @Input()
   public title!: string;
 
@@ -53,6 +61,9 @@ export class RadioGroupComponent implements OnInit {
   @Output()
   public readonly selectedChange: EventEmitter<string> = new EventEmitter();
 
+  private propagateControlValueChange?: (value: string | undefined) => void;
+  private propagateControlValueChangeOnTouch?: (value: string | undefined) => void;
+
   public constructor(private readonly loggerService: LoggerService) {}
 
   public ngOnInit(): void {
@@ -69,14 +80,32 @@ export class RadioGroupComponent implements OnInit {
     }
   }
 
+  public writeValue(value?: string): void {
+    this.setSelection(value);
+  }
+
+  public registerOnChange(onChange: (value?: string) => void): void {
+    this.propagateControlValueChange = onChange;
+  }
+
+  public registerOnTouched(onTouch: (value?: string) => void): void {
+    this.propagateControlValueChangeOnTouch = onTouch;
+  }
+
   public onRadioChange(event: MatRadioChange): void {
-    this.selected = this.options.find(option => option.value === event.value);
-    this.selectedChange.emit(event.value);
+    this.setSelection(event.value);
   }
 
   public isLabelAString(label: string | TemplateRef<unknown>): boolean {
     return typeof label === 'string';
   }
+
+  private setSelection(value: string | undefined): void {
+    this.selected = this.options.find(option => option.value === value);
+    this.selectedChange.emit(value);
+    this.propagateControlValueChange?.(value);
+    this.propagateControlValueChangeOnTouch?.(value);
+  }
 }
 
 export const enum OptionsDirection {