Use userAutocompleter component for UserCF in the project settings. Further the projectID needs to be passed through. Otherwise the inviteButton does not know to which project the user should be added.

config/locales/js-en.yml

@@ -417,6 +417,7 @@ en:
     label_in_more_than: "in more than"
     label_incoming_emails: "Incoming emails"
     label_information_plural: "Information"
+    label_invalid: "Invalid"
     label_import: "Import"
     label_latest_activity: "Latest activity"
     label_last_updated_on: "Last updated on"

frontend/src/app/shared/components/dynamic-forms/components/dynamic-form/dynamic-form.component.ts

@@ -21,6 +21,7 @@ import { UntilDestroyedMixin } from 'core-app/shared/helpers/angular/until-destr
 import { ConfirmDialogService } from 'core-app/shared/components/modals/confirm-dialog/confirm-dialog.service';
 import { IDynamicFieldGroupConfig, IOPDynamicFormSettings, IOPFormlyFieldSettings } from '../../typings';
 import { DynamicFormService } from '../../services/dynamic-form/dynamic-form.service';
+import idFromLink from 'core-app/features/hal/helpers/id-from-link';
 
 /**
 * SETTINGS:
@@ -379,6 +380,9 @@ export class DynamicFormComponent extends UntilDestroyedMixin implements OnChang
       fields = this.dynamicFieldsService.getFormlyFormWithFieldGroups(this.fieldGroups, fields);
     }
 
+    const id = this.resourceId || idFromLink(this.resourcePath || null);
+    model.id = id;
+
     this.fields = fields;
     this.innerModel = model;
     this.form = this.dynamicFormGroup || form;

frontend/src/app/shared/components/dynamic-forms/components/dynamic-inputs/project-input/project-input.component.ts

@@ -1,16 +1,13 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+} from '@angular/core';
 import { FieldType } from '@ngx-formly/core';
-import idFromLink from 'core-app/features/hal/helpers/id-from-link';
 
 @Component({
   selector: 'op-project-input',
   templateUrl: './project-input.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ProjectInputComponent extends FieldType implements OnInit {
-  projectId:string|undefined;
-
-  public ngOnInit():void {
-    this.projectId = idFromLink(this.model?.project?.href);
-  }
+export class ProjectInputComponent extends FieldType {
 }

frontend/src/app/shared/components/dynamic-forms/components/dynamic-inputs/select-input/select-input.component.html

@@ -21,11 +21,4 @@
   <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
     <div [ngOptionHighlight]="search" class="ng-option-label ellipsis">{{ item.name }}</div>
   </ng-template>
-
-  <ng-template ng-footer-tmp *ngIf="to.showAddNewUserButton">
-    <op-invite-user-button
-        class="op-select-footer"
-        [projectId]="projectId"
-    ></op-invite-user-button>
-  </ng-template>
-</ng-select>
+</ng-select>

frontend/src/app/shared/components/dynamic-forms/components/dynamic-inputs/select-input/select-input.component.ts

@@ -7,12 +7,5 @@ import idFromLink from 'core-app/features/hal/helpers/id-from-link';
   templateUrl: './select-input.component.html',
   styleUrls: ['./select-input.component.scss'],
 })
-export class SelectInputComponent extends FieldType implements OnInit {
-  projectId:string|undefined;
-
-  public ngOnInit():void {
-    if (this.model?.project) {
-      this.projectId = idFromLink(this.model.project?.href);
-    }
-  }
+export class SelectInputComponent extends FieldType {
 }

frontend/src/app/shared/components/dynamic-forms/components/dynamic-inputs/user-input/user-input.component.html

@@ -0,0 +1,9 @@
+<op-user-autocompleter
+  [formControl]="formControl"
+  [formlyAttributes]="field"
+  [attr.aria-required]="to.required"
+  [attr.required]="to.required"
+  [url]="to.allowedValuesHref"
+  [inviteUserToProject]="projectId"
+>
+</op-user-autocompleter>

frontend/src/app/shared/components/dynamic-forms/components/dynamic-inputs/user-input/user-input.component.ts

@@ -0,0 +1,19 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  OnInit,
+} from '@angular/core';
+import { FieldType } from '@ngx-formly/core';
+
+@Component({
+  selector: 'op-user-input',
+  templateUrl: './user-input.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class UserInputComponent extends FieldType implements OnInit {
+  projectId:string|undefined;
+
+  public ngOnInit():void {
+    this.projectId = this.model?.id;
+  }
+}

frontend/src/app/shared/components/dynamic-forms/dynamic-forms.module.ts

@@ -20,6 +20,7 @@ import { DateInputComponent } from 'core-app/shared/components/dynamic-forms/com
 import { DynamicFieldGroupWrapperComponent } from 'core-app/shared/components/dynamic-forms/components/dynamic-field-group-wrapper/dynamic-field-group-wrapper.component';
 import { FormattableControlModule } from 'core-app/shared/components/dynamic-forms/components/dynamic-inputs/formattable-textarea-input/components/formattable-control/formattable-control.module';
 import { OPSharedModule } from 'core-app/shared/shared.module';
+import { UserInputComponent } from 'core-app/shared/components/dynamic-forms/components/dynamic-inputs/user-input/user-input.component';
 
 @NgModule({
   imports: [
@@ -35,6 +36,7 @@ import { OPSharedModule } from 'core-app/shared/shared.module';
         { name: 'projectInput', component: ProjectInputComponent },
         { name: 'selectProjectStatusInput', component: SelectProjectStatusInputComponent },
         { name: 'formattableInput', component: FormattableTextareaInputComponent },
+        { name: 'userInput', component: UserInputComponent },
       ],
       wrappers: [
         {
@@ -70,6 +72,7 @@ import { OPSharedModule } from 'core-app/shared/shared.module';
     SelectProjectStatusInputComponent,
     DateInputComponent,
     FormattableTextareaInputComponent,
+    UserInputComponent,
   ],
   exports: [
     DynamicFormComponent,

frontend/src/app/shared/components/dynamic-forms/services/dynamic-fields/dynamic-fields.service.ts

@@ -57,6 +57,12 @@ export class DynamicFieldsService {
       },
       useForFields: ['Date', 'DateTime'],
     },
+    {
+      config: {
+        type: 'userInput',
+      },
+      useForFields: ['User'],
+    },
     {
       config: {
         type: 'formattableInput',
@@ -89,7 +95,7 @@ export class DynamicFieldsService {
         },
       },
       useForFields: [
-        'Priority', 'Status', 'Type', 'User', 'Version', 'TimeEntriesActivity',
+        'Priority', 'Status', 'Type', 'Version', 'TimeEntriesActivity',
         'Category', 'CustomOption',
       ],
     },
@@ -236,13 +242,17 @@ export class DynamicFieldsService {
     const inputConfig = inputType.config;
     let configCustomizations;
 
-    if (inputConfig.type === 'integerInput' || inputConfig.type === 'selectInput' || inputConfig.type === 'selectProjectStatusInput') {
+    if (
+      inputConfig.type === 'integerInput'
+      || inputConfig.type === 'selectInput'
+      || inputConfig.type === 'selectProjectStatusInput'
+      || inputConfig.type === 'userInput'
+    ) {
       configCustomizations = {
         className: field.name,
         templateOptions: {
           ...inputConfig.templateOptions,
           ...(this.isMultiSelectField(field) && { multiple: true }),
-          ...(fieldType === 'User' && { showAddNewUserButton: true }),
         },
       };
     } else if (inputConfig.type === 'formattableInput') {

frontend/src/app/shared/components/dynamic-forms/typings.d.ts

@@ -25,11 +25,10 @@ export interface IOPFormlyTemplateOptions extends FormlyTemplateOptions {
   collapsibleFieldGroupsCollapsed?:boolean;
   helpTextAttributeScope?:string;
   showValidationErrorOn?:'change' | 'blur' | 'submit' | 'never';
-  showAddNewUserButton?:boolean;
 }
 
 type OPInputType = 'formattableInput'|'selectInput'|'textInput'|'integerInput'|
-'booleanInput'|'dateInput'|'formly-group'|'projectInput'|'selectProjectStatusInput';
+'booleanInput'|'dateInput'|'formly-group'|'projectInput'|'selectProjectStatusInput'|'userInput';
 
 export interface IOPDynamicInputTypeSettings {
   config:IOPFormlyFieldSettings,

frontend/src/app/shared/components/forms/form-field/form-field.component.html

@@ -3,10 +3,14 @@
     <div class="op-form-field--label">
       <span
         *ngIf="showErrorMessage"
-        class="Hidden for sighted"
-      >Invalid</span>
+        class="hidden-for-sighted"
+      >
+        {{ text.invalid }}
+      </span>
       {{ label }}
+
       <span *ngIf="required" class="op-form-field--label-indicator">*</span>
+
       <attribute-help-text
         [attribute]="helpTextAttribute"
         [attributeScope]="helpTextAttributeScope"

frontend/src/app/shared/components/forms/form-field/form-field.component.ts

@@ -2,6 +2,7 @@ import {
   Component, ContentChild, HostBinding, Input, Optional,
 } from '@angular/core';
 import { AbstractControl, FormGroupDirective, NgControl } from '@angular/forms';
+import { I18nService } from 'core-app/core/i18n/i18n.service';
 
 @Component({
   selector: 'op-form-field',
@@ -34,6 +35,10 @@ export class OpFormFieldComponent {
 
   internalID = `op-form-field-${+new Date()}`;
 
+  text = {
+    invalid: this.I18n.t('js.label_invalid'),
+  };
+
   get errorsID() {
     return `${this.internalID}-errors`;
   }
@@ -68,5 +73,6 @@ export class OpFormFieldComponent {
 
   constructor(
     @Optional() private _formGroupDirective:FormGroupDirective,
+    readonly I18n:I18nService,
   ) {}
 }