example

npm/ng-packs/apps/dev-app/src/assets/form-config.json

@@ -26,7 +26,7 @@
   {
     "key": "email",
     "type": "email",
-    "label": "Email Address",
+    "label": "AbpAccount::EmailAddress",
     "placeholder": "Enter email",
     "required": true,
     "validators": [

npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html

@@ -1,81 +1,62 @@
 @if (visible()) {
-  <div [formGroup]="fieldFormGroup">
+<div [formGroup]="fieldFormGroup">
-    @if (field().type === 'text') {
+  @if (field().type === 'text') {
-      <!-- Text Input -->
+  <!-- Text Input -->
-      <div class="form-group">
+  <div class="form-group mb-3">
-        <ng-container [ngTemplateOutlet]="labelTemplate" />
+    <ng-container [ngTemplateOutlet]="labelTemplate" />
-        <input
+    <input [id]="field().key" [placeholder]="(field().placeholder || '') | abpLocalization" formControlName="value"
-          [id]="field().key"
+      [class.is-invalid]="isInvalid" class="form-control">
-          [placeholder]="field().placeholder || ''"
+    @if (isInvalid) {
-          formControlName="value"
+    <ng-container [ngTemplateOutlet]="errorTemplate" />
-          [class.is-invalid]="isInvalid"
+    }
-          class="form-control">
+  </div>
-        @if (isInvalid) {
+  } @else if (field().type === 'select') {
-          <ng-container [ngTemplateOutlet]="errorTemplate"/>
+  <!-- Select Dropdown -->
-        }
+  <div class="form-group mb-3">
-      </div>
+    <ng-container [ngTemplateOutlet]="labelTemplate" />
-    } @else if (field().type === 'select') {
+    <select [id]="field().key" formControlName="value" [class.is-invalid]="isInvalid" class="form-control">
-      <!-- Select Dropdown -->
+      <option value="">{{ '::Select' | abpLocalization }}</option>
-      <div class="form-group">
+      @for (option of field().options; track option.key) {
-        <ng-container [ngTemplateOutlet]="labelTemplate" />
+      <option [value]="option.key">
-        <select
+        {{ option.value | abpLocalization }}
-          [id]="field().key"
+      </option>
-          formControlName="value"
+      }
-          [class.is-invalid]="isInvalid"
+    </select>
-          class="form-control">
+    @if (isInvalid) {
-          <option value="">Please select...</option>
+    <ng-container [ngTemplateOutlet]="errorTemplate" />
-          @for (option of field().options; track option.key) {
+    }
-            <option
+  </div>
-              [value]="option.key">
+  } @else if (field().type === 'checkbox') {
-              {{ option.value }}
+  <!-- Checkbox -->
-            </option>
+  <div class="form-group form-check mb-3">
-          }
+    <abp-checkbox [label]="field().label | abpLocalization" formControlName="value" [id]="field().key" />
-        </select>
+    @if (isInvalid) {
-        @if (isInvalid) {
+    <ng-container [ngTemplateOutlet]="errorTemplate" />
-          <ng-container [ngTemplateOutlet]="errorTemplate"/>
+    }
-        }
+  </div>
-      </div>
+  } @else if (field().type === 'email') {
-    } @else if (field().type === 'checkbox') {
+  <!-- Email Input -->
-      <!-- Checkbox -->
+  <div class="form-group mb-3">
-      <div class="form-group form-check">
+    <ng-container [ngTemplateOutlet]="labelTemplate" />
-        <abp-checkbox [label]="field().label" formControlName="value" [id]="field().key" />
+    <input type="email" [id]="field().key" formControlName="value"
-        @if (isInvalid) {
+      [placeholder]="(field().placeholder || '') | abpLocalization" [class.is-invalid]="isInvalid" class="form-control">
-          <ng-container [ngTemplateOutlet]="errorTemplate"/>
+    @if (isInvalid) {
-        }
+    <ng-container [ngTemplateOutlet]="errorTemplate" />
-      </div>
+    }
-    } @else if (field().type === 'email') {
+  </div>
-      <!-- Email Input -->
+  } @else if (field().type === 'textarea') {
-      <div class="form-group">
+  <!-- Textarea -->
-        <label [for]="field().key">{{ field().label }}</label>
+  <div class="form-group mb-3">
-        <input
+    <ng-container [ngTemplateOutlet]="labelTemplate" />
-          type="email"
+    <textarea [id]="field().key" formControlName="value" [placeholder]="(field().placeholder || '') | abpLocalization"
-          [id]="field().key"
+      [class.is-invalid]="isInvalid" rows="4" class="form-control">
-          formControlName="value"
-          [placeholder]="field().placeholder || ''"
-          [class.is-invalid]="isInvalid"
-          class="form-control">
-        @if (isInvalid) {
-          <ng-container [ngTemplateOutlet]="errorTemplate"/>
-        }
-      </div>
-    } @else if (field().type === 'textarea') {
-      <!-- Textarea -->
-      <div class="form-group">
-        <label [for]="field().key">{{ field().label }}</label>
-        <textarea
-          [id]="field().key"
-          formControlName="value"
-          [placeholder]="field().placeholder || ''"
-          [class.is-invalid]="isInvalid"
-          rows="4"
-          class="form-control">
         </textarea>
-        @if (isInvalid) {
+    @if (isInvalid) {
-          <ng-container [ngTemplateOutlet]="errorTemplate"/>
+    <ng-container [ngTemplateOutlet]="errorTemplate" />
-        }
-      </div>
     }
   </div>
+  }
+</div>
 }
 
 <ng-template #labelTemplate>
@@ -85,7 +66,7 @@
 <ng-template #errorTemplate>
   <div class="invalid-feedback">
     @for (error of errors; track error) {
-      <div>{{ error | abpLocalization }}</div>
+    <div>{{ error | abpLocalization }}</div>
     }
   </div>
-</ng-template>
+</ng-template>