+
+
+ {{ controlHint }}
+
+
+
+
+ Error:
+ {{ (control?.errors | keyvalue)?.[0]?.value }}
+
+
+
+
diff --git a/src/app/forms/components/govuk-form-group-select/govuk-form-group-select.component.scss b/src/app/forms/components/govuk-form-group-select/govuk-form-group-select.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/forms/components/govuk-form-group-select/govuk-form-group-select.component.ts b/src/app/forms/components/govuk-form-group-select/govuk-form-group-select.component.ts
new file mode 100644
index 000000000..4656925db
--- /dev/null
+++ b/src/app/forms/components/govuk-form-group-select/govuk-form-group-select.component.ts
@@ -0,0 +1,102 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, Output, forwardRef, inject } from '@angular/core';
+import {
+ ControlContainer,
+ ControlValueAccessor,
+ FormsModule,
+ NG_VALUE_ACCESSOR,
+ ReactiveFormsModule,
+} from '@angular/forms';
+import { DynamicFormsModule } from '@forms/dynamic-forms.module';
+import { MultiOption } from '@models/options.model';
+import { CustomTag } from '@services/dynamic-forms/dynamic-form.types';
+import { SharedModule } from '@shared/shared.module';
+
+@Component({
+ selector: 'govuk-form-group-select',
+ standalone: true,
+ imports: [CommonModule, FormsModule, ReactiveFormsModule, SharedModule, DynamicFormsModule],
+ templateUrl: './govuk-form-group-select.component.html',
+ styleUrls: ['./govuk-form-group-select.component.scss'],
+ providers: [
+ {
+ provide: NG_VALUE_ACCESSOR,
+ useExisting: forwardRef(() => GovukFormGroupSelectComponent),
+ multi: true,
+ },
+ ],
+})
+export class GovukFormGroupSelectComponent implements ControlValueAccessor {
+ @Output() blur = new EventEmitter
();
+ @Output() focus = new EventEmitter();
+
+ @Input()
+ value: string | number | boolean | null = null;
+
+ @Input()
+ disabled = false;
+
+ @Input()
+ tags: CustomTag[] = [];
+
+ @Input({ required: true })
+ options!: MultiOption[];
+
+ @Input({ alias: 'hint' })
+ controlHint = '';
+
+ @Input({ alias: 'formControlName', required: true })
+ controlName = '';
+
+ @Input({ alias: 'label', required: true })
+ controlLabel = '';
+
+ @Input({ alias: 'id' })
+ controlId = '';
+
+ controlContainer = inject(ControlContainer);
+
+ get control() {
+ return this.controlContainer.control?.get(this.controlName);
+ }
+
+ get id() {
+ return this.controlId || this.controlName;
+ }
+
+ get hintId() {
+ return `${this.id}-hint`;
+ }
+
+ get labelId() {
+ return `${this.id}-label`;
+ }
+
+ get errorId() {
+ return `${this.id}-error`;
+ }
+
+ get hasError() {
+ return this.control?.invalid && this.control?.touched && this.control?.errors;
+ }
+
+ onChange = (_: any) => {};
+ onTouched = () => {};
+
+ writeValue(obj: any): void {
+ this.value = obj;
+ this.onChange(obj);
+ }
+
+ registerOnChange(fn: any): void {
+ this.onChange = fn;
+ }
+
+ registerOnTouched(fn: any): void {
+ this.onTouched = fn;
+ }
+
+ setDisabledState?(isDisabled: boolean): void {
+ this.disabled = isDisabled;
+ }
+}
diff --git a/src/app/forms/custom-sections/vehicle-section/vehicle-section-edit/vehicle-section-edit.component.html b/src/app/forms/custom-sections/vehicle-section/vehicle-section-edit/vehicle-section-edit.component.html
index f6b929662..48a0d3c2d 100644
--- a/src/app/forms/custom-sections/vehicle-section/vehicle-section-edit/vehicle-section-edit.component.html
+++ b/src/app/forms/custom-sections/vehicle-section/vehicle-section-edit/vehicle-section-edit.component.html
@@ -197,15 +197,23 @@
-
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/forms/dynamic-forms.module.ts b/src/app/forms/dynamic-forms.module.ts
index b9cfdfd9c..82b30194b 100644
--- a/src/app/forms/dynamic-forms.module.ts
+++ b/src/app/forms/dynamic-forms.module.ts
@@ -12,6 +12,7 @@ import { DateFocusNextDirective } from '@directives/date-focus-next/date-focus-n
import { PrefixDirective } from '@directives/prefix/prefix.directive';
import { SuffixDirective } from '@directives/suffix/suffix.directive';
import { ApprovalTypeInputComponent } from '@forms/components/approval-type/approval-type.component';
+import { GovukFormGroupSelectComponent } from '@forms/components/govuk-form-group-select/govuk-form-group-select.component';
import { AdrCertificateHistoryComponent } from '@forms/custom-sections/adr-certificate-history/adr-certificate-history.component';
import { AdrExaminerNotesHistoryEditComponent } from '@forms/custom-sections/adr-examiner-notes-history-edit/adr-examiner-notes-history.component-edit';
import { AdrPermittedDangerousGoodsComponent } from '@forms/custom-sections/adr-permitted-dangerous-goods/adr-permitted-dangerous-goods.component';
@@ -166,6 +167,7 @@ import { WeightsComponent } from './custom-sections/weights/weights.component';
NumberOnlyDirective,
GovukCheckboxGroupComponent,
GovukFormGroupRadioComponent,
+ GovukFormGroupSelectComponent,
],
exports: [
TextInputComponent,