Merge pull request #19972 from abpframework/issue-19807

Angular - Extra Property Localization Problem

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

@@ -1,4 +1,7 @@
-<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>
@@ -50,9 +53,7 @@
         class="form-select form-control"
       >
         @for (option of options$ | async; track option.value) {
-          <option
+          <option [ngValue]="option.value">
-            [ngValue]="option.value"
-          >
             {{ option.key }}
           </option>
         }
@@ -152,7 +153,7 @@
             aria-hidden="true"
             [ngClass]="{
               'fa-eye-slash': !showPassword,
-              'fa-eye': showPassword
+              'fa-eye': showPassword,
             }"
           ></i>
         </button>
@@ -160,9 +161,7 @@
     </ng-template>
 
     @if (prop.formText) {
-    <small class="text-muted d-block">{{
+      <small class="text-muted d-block">{{ prop.formText | abpLocalization }}</small>
-      prop.formText | abpLocalization
-    }}</small>
     }
   </div>
 </ng-container>
@@ -171,12 +170,21 @@
   <label [htmlFor]="prop.id" [ngClass]="classes || 'form-label'">
     @if (prop.displayTextResolver) {
       {{ prop.displayTextResolver(data) | abpLocalization }}
-    }@else{
+    } @else {
-      {{ prop.displayName | abpLocalization }}
+      @if (prop.isExtra) {
+        {{ '::' + prop.displayName | abpLocalization }}
+      } @else {
+        {{ prop.displayName | abpLocalization }}
+      }
     }
     {{ asterisk }}
     @if (prop.tooltip) {
-      <i [ngbTooltip]="prop.tooltip.text | abpLocalization" [placement]="prop.tooltip.placement || 'auto'"  container="body" class="bi bi-info-circle"></i>
+      <i
+        [ngbTooltip]="prop.tooltip.text | abpLocalization"
+        [placement]="prop.tooltip.placement || 'auto'"
+        container="body"
+        class="bi bi-info-circle"
+      ></i>
     }
   </label>
 </ng-template>

npm/ng-packs/packages/identity/src/lib/defaults/default-users-form-props.ts

@@ -1,5 +1,5 @@
 import { Validators } from '@angular/forms';
-import { ConfigStateService, CurrentUserDto } from '@abp/ng.core';
+import { ConfigStateService } from '@abp/ng.core';
 import { getPasswordValidators } from '@abp/ng.theme.shared';
 import { ePropType, FormProp } from '@abp/ng.components/extensible';
 import { IdentityUserDto } from '@abp/ng.identity/proxy';