Added displayNameResolver to form prop

npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html

@@ -1,17 +1,13 @@
-<ng-container [ngSwitch]="getComponent(prop)"
-
-              *abpPermission="prop.permission; runChangeDetection: false">
-
+<ng-container
+  [ngSwitch]="getComponent(prop)"
+  *abpPermission="prop.permission; runChangeDetection: false"
+>
   <ng-template ngSwitchCase="template">
-    <ng-container
-      *ngComponentOutlet="prop.template;injector:injectorForCustomComponent">
+    <ng-container *ngComponentOutlet="prop.template; injector: injectorForCustomComponent">
     </ng-container>
   </ng-template>
 
-  <div
-    [ngClass]="containerClassName"
-    class="mb-3 form-group"
-  >
+  <div [ngClass]="containerClassName" class="mb-3 form-group">
     <ng-template ngSwitchCase="input">
       <ng-template [ngTemplateOutlet]="label"></ng-template>
       <input
@@ -27,7 +23,7 @@
     </ng-template>
 
     <ng-template ngSwitchCase="hidden">
-      <input [formControlName]="prop.name" type="hidden"/>
+      <input [formControlName]="prop.name" type="hidden" />
     </ng-template>
 
     <ng-template ngSwitchCase="checkbox">
@@ -103,7 +99,7 @@
           [class.is-invalid]="typeahead.classList.contains('is-invalid')"
           class="form-control"
         />
-        <input [formControlName]="prop.name" type="hidden"/>
+        <input [formControlName]="prop.name" type="hidden" />
       </div>
     </ng-template>
 
@@ -143,11 +139,14 @@
       ></textarea>
     </ng-template>
   </div>
-
 </ng-container>
 
 <ng-template #label let-classes>
-  <label [htmlFor]="prop.id" [ngClass]="classes || 'form-label'" x
-  >{{ prop.displayName | abpLocalization }} {{ asterisk }}</label
-  >
+  <label [htmlFor]="prop.id" [ngClass]="classes || 'form-label'">
+    <ng-container *ngIf="prop.displayTextResolver; else displayNameTemplate">
+      {{ prop.displayTextResolver(data) | abpLocalization }}
+    </ng-container>
+    <ng-template #displayNameTemplate> {{ prop.displayName | abpLocalization }}</ng-template>
+    {{ asterisk }}
+  </label>
 </ng-template>

npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts

@@ -60,7 +60,7 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
 
   asterisk = '';
 
-  containerClassName = 'mb-3 form-group'
+  containerClassName = 'mb-3 form-group';
 
   options$: Observable<ABP.Option<any>[]> = of([]);
 
@@ -136,6 +136,7 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
   ngAfterViewInit() {
     if (this.first && this.fieldRef) {
       this.fieldRef.nativeElement.focus();
+      this.cdRef.detectChanges();
     }
   }
 
@@ -213,7 +214,7 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
       this.validators = validators(this.data);
       this.setAsterisk();
     }
-    if(className !== undefined){
+    if (className !== undefined) {
       this.containerClassName = className;
     }
 

npm/ng-packs/packages/theme-shared/extensions/src/lib/models/form-props.ts

@@ -9,6 +9,7 @@ import {
   PropContributorCallback,
   PropContributorCallbacks,
   PropData,
+  PropDisplayTextResolver,
   PropList,
   PropPredicate,
   Props,
@@ -69,6 +70,7 @@ export class FormProp<R = any> extends Prop<R> {
   readonly template?: Type<any>;
   readonly className?: string;
   readonly group?: FormPropGroup | undefined;
+  readonly displayTextResolver?: PropDisplayTextResolver<R>;
 
   constructor(options: FormPropOptions<R>) {
     super(
@@ -93,6 +95,7 @@ export class FormProp<R = any> extends Prop<R> {
     this.id = options.id || options.name;
     const defaultValue = options.defaultValue;
     this.defaultValue = isFalsyValue(defaultValue) ? defaultValue : defaultValue || null;
+    this.displayTextResolver = options.displayTextResolver;
   }
 
   static create<R = any>(options: FormPropOptions<R>) {
@@ -128,6 +131,7 @@ export type FormPropOptions<R = any> = O.Optional<
   | 'defaultValue'
   | 'options'
   | 'id'
+  | 'displayTextResolver'
 >;
 
 export type CreateFormPropDefaults<R = any> = Record<string, FormProp<R>[]>;

npm/ng-packs/packages/theme-shared/extensions/src/lib/models/props.ts

@@ -35,6 +35,7 @@ export abstract class Prop<R = any> {
     public readonly isExtra = false,
     public readonly template?: Type<any>,
     public readonly className?: string,
+    public readonly displayTextResolver?: PropDisplayTextResolver<R>,
   ) {
     this.displayName = this.displayName || this.name;
   }
@@ -42,6 +43,7 @@ export abstract class Prop<R = any> {
 
 export type PropCallback<T, R = any> = (data: Omit<PropData<T>, 'data'>, auxData?: any) => R;
 export type PropPredicate<T> = (data?: Omit<PropData<T>, 'data'>, auxData?: any) => boolean;
+export type PropDisplayTextResolver<T> = (data?: Omit<PropData<T>, 'data'>) => string;
 
 export abstract class PropsFactory<C extends Props<any>> {
   protected abstract _ctor: Type<C>;