Fix validation.

frontend/src/app/framework/angular/forms/editors/autocomplete.component.html

@@ -22,7 +22,8 @@
             [placeholder]="placeholder"
             rows="2"
             sqxAutosize
-            [sqxFocusOnInit]="autoFocus"></textarea>
+            [sqxFocusOnInit]="autoFocus"
+            sqxForwardFormClasses></textarea>
     } @else {
         <input
             class="form-control"

frontend/src/app/framework/angular/forms/editors/autocomplete.component.ts

@@ -20,6 +20,7 @@ import { ScrollActiveDirective } from '../../scroll-active.directive';
 import { StopClickDirective } from '../../stop-click.directive';
 import { TemplateWrapperDirective } from '../../template-wrapper.directive';
 import { FocusOnInitDirective } from '../focus-on-init.directive';
+import { ForwardFormClassesDirective } from '../forward-form-classes.directive';
 
 export interface AutocompleteSource {
     find(query: string): Observable<ReadonlyArray<any>>;
@@ -77,6 +78,7 @@ const RANGE_LIMIT = 60;
         DropdownMenuComponent,
         FocusOnInitDirective,
         FormsModule,
+        ForwardFormClassesDirective,
         LoaderComponent,
         ModalDirective,
         ModalPlacementDirective,

frontend/src/app/framework/angular/forms/editors/date-time-editor.component.html

@@ -28,6 +28,7 @@
             (ngModelChange)="updateValue($event)"
             [ngModelOptions]="{ standalone: true }"
             placeholder="{{ 'common.date' | sqxTranslate }}"
+            sqxForwardFormClasses
             [type]="isDateTimeMode ? 'datetime-local' : 'date'" />
     </div>
 

frontend/src/app/framework/angular/forms/editors/date-time-editor.component.ts

@@ -13,6 +13,7 @@ import { TooltipDirective } from '../../modals/tooltip.directive';
 import { TranslatePipe } from '../../pipes/translate.pipe';
 import { ResizedDirective } from '../../resized.directive';
 import { FocusComponent } from '../forms-helper';
+import { ForwardFormClassesDirective } from '../forward-form-classes.directive';
 
 export const SQX_DATE_TIME_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateTimeEditorComponent), multi: true,
@@ -39,6 +40,7 @@ interface State {
     changeDetection: ChangeDetectionStrategy.OnPush,
     imports: [
         FormsModule,
+        ForwardFormClassesDirective,
         ReactiveFormsModule,
         ResizedDirective,
         TooltipDirective,

frontend/src/app/framework/angular/forms/editors/dropdown.component.html

@@ -10,7 +10,8 @@
         [disabled]="snapshot.isDisabled"
         (keydown)="onKeyDown($event)"
         [name]="formName"
-        readonly />
+        readonly
+        sqxForwardFormClasses />
     @if (snapshot.selectedItem; as selectedItem) {
         <div class="control-dropdown-item">
             <div class="no-wrap">

frontend/src/app/framework/angular/forms/editors/dropdown.component.ts

@@ -18,6 +18,7 @@ import { TranslatePipe } from '../../pipes/translate.pipe';
 import { ScrollActiveDirective } from '../../scroll-active.directive';
 import { TemplateWrapperDirective } from '../../template-wrapper.directive';
 import { FocusOnInitDirective } from '../focus-on-init.directive';
+import { ForwardFormClassesDirective } from '../forward-form-classes.directive';
 
 export const SQX_DROPDOWN_CONTROL_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DropdownComponent), multi: true,
@@ -49,6 +50,7 @@ interface State {
         DropdownMenuComponent,
         FocusOnInitDirective,
         FormsModule,
+        ForwardFormClassesDirective,
         LoaderComponent,
         ModalDirective,
         ModalPlacementDirective,

frontend/src/app/framework/angular/forms/editors/tag-editor.component.html

@@ -12,6 +12,7 @@
         [class.suggested]="itemsSorted.length > 0"
         (focus)="focusInput($event)"
         (mousedown)="focusInput($event)"
+        sqxForwardFormClasses
         tabindex="0">
         @for (tag of snapshot.tags; track tag; let i = $index) {
             <span class="item" [class.disabled]="addInput.disabled"> {{ tag }} <i class="icon-close" (click)="remove(i)"></i> </span>

frontend/src/app/framework/angular/forms/editors/tag-editor.component.ts

@@ -18,6 +18,7 @@ import { TooltipDirective } from '../../modals/tooltip.directive';
 import { TranslatePipe } from '../../pipes/translate.pipe';
 import { ScrollActiveDirective } from '../../scroll-active.directive';
 import { StopClickDirective } from '../../stop-click.directive';
+import { ForwardFormClassesDirective } from '../forward-form-classes.directive';
 
 export const SQX_TAG_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TagEditorComponent), multi: true,
@@ -49,6 +50,7 @@ interface State {
         DropdownMenuComponent,
         FormsModule,
         LoaderComponent,
+        ForwardFormClassesDirective,
         ModalDirective,
         ModalPlacementDirective,
         ReactiveFormsModule,

frontend/src/app/framework/angular/forms/form-row.component.ts

@@ -6,8 +6,8 @@
  */
 
 
-import { booleanAttribute, ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
+import { booleanAttribute, ChangeDetectionStrategy, Component, HostBinding, Input, Optional, SkipSelf } from '@angular/core';
-import { AbstractControl } from '@angular/forms';
+import { AbstractControl, FormGroupDirective } from '@angular/forms';
 import { Types } from '@app/framework/internal';
 import { MarkdownDirective } from '../markdown.directive';
 import { TranslatePipe } from '../pipes/translate.pipe';
@@ -26,6 +26,13 @@ import { FormHintComponent } from './form-hint.component';
         '[class.row]': '!vertical',
         '[class.form-group-aligned]': 'centered',
     },
+    viewProviders: [
+        {
+            provide: FormGroupDirective,
+            useFactory: (directive: FormGroupDirective) => directive,
+            deps: [[new Optional(), new SkipSelf(), FormGroupDirective]],
+        },
+    ],
     imports: [
         ControlErrorsComponent,
         FormAlertComponent,

frontend/src/app/framework/angular/forms/forward-form-classes.directive.ts

@@ -0,0 +1,37 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { Directive, DoCheck, ElementRef, Injector, OnInit } from "@angular/core";
+import { NgControl } from "@angular/forms";
+
+@Directive({
+    selector: '[sqxForwardFormClasses]',
+})
+export class ForwardFormClassesDirective implements OnInit, DoCheck {
+    private ngControl: NgControl | null = null;
+
+    constructor(
+        private readonly injector: Injector,
+        private readonly host: ElementRef<HTMLElement>,
+    ) {
+    }
+
+    public ngOnInit() {
+        this.ngControl = this.injector.get(NgControl, null);
+    }
+
+    public ngDoCheck() {
+        const classes = this.host.nativeElement.classList;
+        classes.toggle('ng-touched', !!this.ngControl?.touched);
+        classes.toggle('ng-untouched', !!this.ngControl?.untouched);
+        classes.toggle('ng-dirty', !!this.ngControl?.dirty);
+        classes.toggle('ng-pristine', !!this.ngControl?.pristine);
+        classes.toggle('ng-valid', !!this.ngControl?.valid);
+        classes.toggle('ng-invalid', !!this.ngControl?.invalid);
+        classes.toggle('ng-pending', !!this.ngControl?.pending);
+    }
+}

frontend/src/app/shared/state/schemas.forms.ts

@@ -422,7 +422,7 @@ export class EditSchemaForm extends Form<ExtendedFormGroup, UpdateSchemaDto, Sch
                 Validators.nullValidator,
             ),
             searchFields: new UntypedFormControl([],
-                Validators.nullValidator,
+                Validators.maxLength(3),
             ),
             tags: new UntypedFormControl([],
                 Validators.nullValidator,