diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/password/password.component.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/password/password.component.ts
deleted file mode 100644
index ca93a1d121..0000000000
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/password/password.component.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { EXTENSIBLE_FORM_VIEW_PROVIDER } from '../../tokens/extensible-form-view-provider.token';
-import { FormProp } from '../../models/form-props';
-
-@Component({
-  selector: 'abp-password',
-  templateUrl: `password.component.html`,
-  viewProviders: [EXTENSIBLE_FORM_VIEW_PROVIDER],
-})
-export class PasswordComponent {
-  @Input() prop!: FormProp;
-
-  fieldTextType: boolean;
-
-  toggleFieldTextType() {
-    this.fieldTextType = !this.fieldTextType;
-  }
-}
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/ui-extensions.module.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/ui-extensions.module.ts
index 9917157182..aebaa16036 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/ui-extensions.module.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/ui-extensions.module.ts
@@ -17,7 +17,6 @@ import { PageToolbarComponent } from './components/page-toolbar/page-toolbar.com
 import { DisabledDirective } from './directives/disabled.directive';
 import { PropDataDirective } from './directives/prop-data.directive';
 import { CreateInjectorPipe } from './pipes/create-injector.pipe';
-import { PasswordComponent } from './components/password/password.component';
 
 @NgModule({
   exports: [
@@ -26,7 +25,6 @@ import { PasswordComponent } from './components/password/password.component';
     GridActionsComponent,
     ExtensibleFormComponent,
     ExtensibleTableComponent,
-    PasswordComponent,
     PropDataDirective,
     DisabledDirective,
     CreateInjectorPipe,
@@ -38,7 +36,6 @@ import { PasswordComponent } from './components/password/password.component';
     ExtensibleFormPropComponent,
     ExtensibleFormComponent,
     ExtensibleTableComponent,
-    PasswordComponent,
     PropDataDirective,
     DisabledDirective,
     CreateInjectorPipe,
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts
index 3f8e3c5e0f..810d5a991a 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts
@@ -10,3 +10,4 @@ export * from './modal/modal-ref.service';
 export * from './modal/modal.component';
 export * from './toast-container/toast-container.component';
 export * from './toast/toast.component';
+export * from './password/password.component';
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/password/password.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/password/password.component.html
similarity index 87%
rename from npm/ng-packs/packages/theme-shared/extensions/src/lib/components/password/password.component.html
rename to npm/ng-packs/packages/theme-shared/src/lib/components/password/password.component.html
index 685e6eca66..3272e2bec9 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/password/password.component.html
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/password/password.component.html
@@ -2,8 +2,8 @@
   <input
     [type]="fieldTextType ? 'text' : 'password'"
     class="form-control"
-    [id]="prop.id"
-    [formControlName]="prop.name"
+    [id]="inputId"
+    [(ngModel)]="value"
   />
 
   <button class="btn btn-secondary" type="button">
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/password/password.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/password/password.component.ts
new file mode 100644
index 0000000000..0c253ba848
--- /dev/null
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/password/password.component.ts
@@ -0,0 +1,22 @@
+import {Component, Injector, Input} from '@angular/core';
+import {AbstractNgModelComponent} from "@abp/ng.core";
+
+@Component({
+  selector: 'abp-password',
+  templateUrl: `password.component.html`,
+})
+export class PasswordComponent extends AbstractNgModelComponent{
+  @Input() inputId!: string;
+
+  fieldTextType: boolean;
+
+  constructor(
+    injector: Injector,
+  ) {
+    super(injector);
+  }
+
+  toggleFieldTextType() {
+    this.fieldTextType = !this.fieldTextType;
+  }
+}
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts
index 6240925054..d5689e76ce 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts
@@ -35,6 +35,7 @@ import { THEME_SHARED_APPEND_CONTENT } from './tokens/append-content.token';
 import { httpErrorConfigFactory, HTTP_ERROR_CONFIG } from './tokens/http-error.token';
 import { DateParserFormatter } from './utils/date-parser-formatter';
 import { CONFIRMATION_ICONS, DEFAULT_CONFIRMATION_ICONS } from './tokens/confirmation-icons.token';
+import {PasswordComponent} from "./components";
 
 const declarationsWithExports = [
   BreadcrumbComponent,
@@ -46,6 +47,7 @@ const declarationsWithExports = [
   ModalComponent,
   ToastComponent,
   ToastContainerComponent,
+  PasswordComponent,
   NgxDatatableDefaultDirective,
   NgxDatatableListDirective,
   LoadingDirective,