RED-7340 - When a user has entered an invalid page range string, display a read border around the input field

src/lib/inputs/details-radio/details-radio-option.ts

@@ -12,6 +12,7 @@ interface AdditionalCheck extends AdditionalField {
 interface AdditionalInput extends AdditionalField {
     value: string;
     placeholder?: string;
+    errorCode?: string;
 }
 
 export interface DetailsRadioOption<I> {

src/lib/inputs/details-radio/details-radio.component.html

@@ -43,11 +43,12 @@
                             }
 
                             @if (option.additionalInput) {
-                                <div class="iqser-input-group w-300 additional-input">
+                                <div class="iqser-input-group w-400 additional-input">
                                     <span class="label"> {{ option.additionalInput.label | translate }} </span>
                                     <div class="flex-column">
                                         <input
                                             [(ngModel)]="option.additionalInput.value"
+                                            [ngClass]="{ error: hasError(option.additionalInput.errorCode) }"
                                             [placeholder]="
                                                 option.additionalInput.placeholder ? (option.additionalInput.placeholder | translate) : ''
                                             "

src/lib/inputs/details-radio/details-radio.component.scss

@@ -59,6 +59,10 @@ label {
         }
 
         div {
+            .error {
+                border-color: var(--iqser-red-1);
+            }
+
             display: flex;
 
             span {

src/lib/inputs/form-field/form-field-component.directive.ts

@@ -1,19 +1,47 @@
-import { ChangeDetectorRef, Directive, inject } from '@angular/core';
+import { ChangeDetectorRef, Directive, inject, Injector, OnInit } from '@angular/core';
-import { ControlValueAccessor, ValidationErrors, Validator } from '@angular/forms';
+import {
+    ControlValueAccessor,
+    FormControl,
+    FormControlDirective,
+    FormControlName,
+    FormGroupDirective,
+    NgControl,
+    ValidationErrors,
+    Validator,
+} from '@angular/forms';
 
 @Directive()
-export abstract class FormFieldComponent<I> implements ControlValueAccessor, Validator {
+export abstract class FormFieldComponent<I> implements ControlValueAccessor, Validator, OnInit {
     touched = false;
     disabled = false;
 
     protected readonly _changeRef = inject(ChangeDetectorRef);
+    protected readonly _injector = inject(Injector);
 
+    protected _formControl: FormControl | undefined;
     protected _value: I | undefined;
 
     get value(): I | undefined {
         return this._value;
     }
 
+    ngOnInit() {
+        const ngControl = this._injector.get(NgControl);
+
+        if (ngControl instanceof FormControlName) {
+            this._formControl = this._injector.get(FormGroupDirective).getControl(ngControl);
+        } else {
+            this._formControl = (ngControl as FormControlDirective).form as FormControl;
+        }
+    }
+
+    hasError(errorCode: string | undefined): boolean {
+        if (errorCode && this._formControl) {
+            return this._formControl.hasError(errorCode);
+        }
+        return false;
+    }
+
     // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
     onChange = (value?: I) => {};