Merge pull request #16699 from abpframework/form-text-muted

show muted text in form field

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

@@ -153,6 +153,10 @@
         [formControlName]="prop.name"
       ></abp-password>
     </ng-template>
+
+    <small *ngIf="prop.formText" class="form-text text-muted">{{
+      prop.formText | abpLocalization
+    }}</small>
   </div>
 </ng-container>
 

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

@@ -71,6 +71,7 @@ export class FormProp<R = any> extends Prop<R> {
   readonly className?: string;
   readonly group?: FormPropGroup | undefined;
   readonly displayTextResolver?: PropDisplayTextResolver<R>;
+  readonly formText?: string;
 
   constructor(options: FormPropOptions<R>) {
     super(
@@ -82,10 +83,11 @@ export class FormProp<R = any> extends Prop<R> {
       options.isExtra,
       options.template,
       options.className,
+      options.formText,
     );
     this.group = options.group;
     this.className = options.className;
-
+    this.formText = options.formText;
     this.asyncValidators = options.asyncValidators || (_ => []);
     this.validators = options.validators || (_ => []);
     this.disabled = options.disabled || (_ => false);
@@ -132,6 +134,7 @@ export type FormPropOptions<R = any> = O.Optional<
   | 'options'
   | 'id'
   | 'displayTextResolver'
+  | 'formText'
 >;
 
 export type CreateFormPropDefaults<R = any> = Record<string, FormProp<R>[]>;

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

@@ -60,6 +60,7 @@ export interface ExtensionPropertyDto {
   attributes: ExtensionPropertyAttributeDto[];
   configuration: Record<string, any>;
   defaultValue: any;
+  formText?: string;
 }
 
 export interface ExtensionPropertyUiDto {

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 formText?: string,
     public readonly displayTextResolver?: PropDisplayTextResolver<R>,
   ) {
     this.displayName = this.displayName || this.name;

npm/ng-packs/packages/theme-shared/extensions/src/lib/utils/state.util.ts

@@ -4,25 +4,25 @@ import {
   ConfigStateService,
   ExtensionEnumDto,
   ExtensionPropertyUiLookupDto,
-  ObjectExtensionsDto
-} from "@abp/ng.core";
-import { Observable, pipe, zip } from "rxjs";
-import { filter, map, switchMap, take } from "rxjs/operators";
-import { ePropType } from "../enums/props.enum";
-import { EntityProp, EntityPropList } from "../models/entity-props";
-import { FormProp, FormPropList } from "../models/form-props";
-import { ObjectExtensions } from "../models/object-extensions";
-import { PropCallback } from "../models/props";
-import { createEnum, createEnumOptions, createEnumValueResolver } from "./enum.util";
-import { createDisplayNameLocalizationPipeKeyGenerator } from "./localization.util";
-import { createExtraPropertyValueResolver } from "./props.util";
+  ObjectExtensionsDto,
+} from '@abp/ng.core';
+import { Observable, pipe, zip } from 'rxjs';
+import { filter, map, switchMap, take } from 'rxjs/operators';
+import { ePropType } from '../enums/props.enum';
+import { EntityProp, EntityPropList } from '../models/entity-props';
+import { FormProp, FormPropList } from '../models/form-props';
+import { ObjectExtensions } from '../models/object-extensions';
+import { PropCallback } from '../models/props';
+import { createEnum, createEnumOptions, createEnumValueResolver } from './enum.util';
+import { createDisplayNameLocalizationPipeKeyGenerator } from './localization.util';
+import { createExtraPropertyValueResolver } from './props.util';
 import {
   createTypeaheadDisplayNameGenerator,
   createTypeaheadOptions,
   getTypeaheadType,
-  hasTypeaheadTextSuffix
-} from "./typeahead.util";
-import { getValidatorsFromProperty } from "./validation.util";
+  hasTypeaheadTextSuffix,
+} from './typeahead.util';
+import { getValidatorsFromProperty } from './validation.util';
 
 function selectObjectExtensions(configState: ConfigStateService): Observable<ObjectExtensionsDto> {
   return configState.getOne$('objectExtensions');
@@ -141,10 +141,10 @@ function createPropertiesToContributorsMapper<T = any>(
       if (property.ui.onTable.isVisible) {
         const sortable = Boolean(property.ui.onTable.isSortable);
         const columnWidth = type === ePropType.Boolean ? 150 : 250;
-        const valueResolver: PropCallback<T, Observable<any>> =
-          type === ePropType.Enum && property.type
-            ? createEnumValueResolver(property.type, enums[property.type], propName)
-            : createExtraPropertyValueResolver<T>(propName);
+        const valueResolver: PropCallback<T, Observable<any>> = type === ePropType.Enum &&
+        property.type
+          ? createEnumValueResolver(property.type, enums[property.type], propName)
+          : createExtraPropertyValueResolver<T>(propName);
 
         const entityProp = new EntityProp<T>({
           type,
@@ -165,6 +165,7 @@ function createPropertiesToContributorsMapper<T = any>(
 
       if (isOnCreateForm || isOnEditForm) {
         const defaultValue = property.defaultValue;
+        const formText = property.formText;
         const validators = () => getValidatorsFromProperty(property);
         let options: PropCallback<any, Observable<ABP.Option<any>[]>> | undefined;
         if (type === ePropType.Enum)
@@ -179,6 +180,7 @@ function createPropertiesToContributorsMapper<T = any>(
           defaultValue,
           validators,
           isExtra,
+          formText,
         });
 
         const formContributor = (propList: FormPropList<T>) => propList.addTail(formProp);