feat(CB2-14451): update multi option and radios

src/app/forms/components/govuk-form-group-radio/govuk-form-group-radio.component.html

@@ -10,6 +10,18 @@ <h1 tag>
         </ng-container>
       </h1>
     </legend>
+
+    <ng-container *ngIf="controlHint">
+      <div class="govuk-hint" id="{{ hintId }}"> {{ controlHint }} </div>
+    </ng-container>
+
+    <ng-container *ngIf="hasError">
+      <p class="govuk-error-message" id="{{ errorId }}">
+        <span class="govuk-visually-hidden">Error: </span>
+        <span>{{ (control?.errors | keyvalue)?.[0]?.value }}</span>
+      </p>
+    </ng-container>
+
     <div data-module="govuk-radios">
       <div *ngFor="let option of options">
         <input
@@ -23,6 +35,9 @@ <h1 tag>
           [attr.aria-labelledby]="labelId"
           [attr.data-testid]="id"
           [class.govuk-radios__input--error]="hasError"
+          [(ngModel)]="value"
+          (ngModelChange)="onChange($event)"
+          (blur)="onTouched()"
         />
         <label
           id="{{ labelId }}"

src/app/forms/custom-sections/adr-section/__tests__/adr-section.component.spec.ts

@@ -0,0 +1,43 @@
+import { SharedModule } from '@/src/app/shared/shared.module';
+import { initialAppState } from '@/src/app/store';
+import { createMockHgv } from '@/src/mocks/hgv-record.mock';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ControlContainer } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
+import { MockStore, provideMockStore } from '@ngrx/store/testing';
+import { of } from 'rxjs';
+import { DynamicFormsModule } from '../../../dynamic-forms.module';
+import { AdrSectionComponent } from '../adr-section.component';
+
+describe('AdrSectionComponent', () => {
+	let store: MockStore;
+	let component: AdrSectionComponent;
+	let fixture: ComponentFixture<AdrSectionComponent>;
+
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			declarations: [AdrSectionComponent],
+			imports: [SharedModule, DynamicFormsModule],
+			providers: [
+				ControlContainer,
+				provideHttpClient(),
+				provideHttpClientTesting(),
+				provideMockStore({ initialState: initialAppState }),
+				{ provide: ActivatedRoute, useValue: { params: of([{ id: 1 }]) } },
+			],
+		}).compileComponents();
+
+		fixture = TestBed.createComponent(AdrSectionComponent);
+		fixture.componentRef.setInput('techRecord', createMockHgv(123));
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+
+		store = TestBed.inject(MockStore);
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});

src/app/forms/custom-sections/adr-section/adr-section-edit/__tests__/adr-section-edit.component.spec.ts

@@ -17,6 +17,7 @@ describe('AdrSectionEditComponent', () => {
 	let component: AdrSectionEditComponent;
 	let fixture: ComponentFixture<AdrSectionEditComponent>;
 	let formGroupDirective: FormGroupDirective;
+	let store: MockStore;
 
 	beforeEach(async () => {
 		formGroupDirective = new FormGroupDirective([], []);

src/app/pipes/multi-option/__tests__/mult-option.pipe.spec.ts → src/app/pipes/multi-option/__tests__/multi-option.pipe.spec.ts

@@ -7,12 +7,15 @@ describe('MultiOption pipe tests', () => {
 	const options: MultiOptions = [
 		{ label: 'Option 1', value: '1' },
 		{ label: 'Option 2', value: '2' },
-		{ label: 'Option 3', value: '3' },
+		{ label: 'option 3', value: '3' },
 	];
 
 	it('should the label associated with the value in the multi option list', () => {
 		expect(pipe.transform('1', options)).toBe('Option 1');
 		expect(pipe.transform('2', options)).toBe('Option 2');
+	});
+
+	it('should capitalise the first letter of the label', () => {
 		expect(pipe.transform('3', options)).toBe('Option 3');
 	});
 

src/app/pipes/multi-option/multi-option.pipe.ts

@@ -1,12 +1,13 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import { MultiOptions } from '../../models/options.model';
+import { DefaultNullOrEmpty } from '../default-null-or-empty/default-null-or-empty.pipe';
 
 @Pipe({ name: 'multiOption' })
 export class MultiOptionPipe implements PipeTransform {
 	transform(value: unknown, options: MultiOptions) {
 		const option = options.find((o) => o.value === value);
 		if (option) {
-			return option.label;
+			return new DefaultNullOrEmpty().transform(option.label);
 		}
 
 		return '-';