Angular - Abp form field component

npm/ng-packs/packages/components/abp-input/README.md

@@ -0,0 +1,3 @@
+# @abp/ng.components/abp-input
+
+Secondary entry point of `@abp/ng.components`. It can be used by importing from `@abp/ng.components/abp-input`.

npm/ng-packs/packages/components/abp-input/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-entrypoint.schema.json",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

npm/ng-packs/packages/components/abp-input/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/abp-input.component';

npm/ng-packs/packages/components/abp-input/src/lib/abp-input.component.html

@@ -0,0 +1,18 @@
+<div class="form-group" [formGroup]="abpInputFormGroup">
+  <label [for]="id()">{{ label() | abpLocalization }}</label>
+  <input
+    [type]="type()"
+    [id]="id()"
+    class="form-control"
+    [placeholder]="placeholder()"
+    formControlName="value"
+  />
+  @if (errors.length > 0) {
+    <div class="invalid-feedback d-block">
+      @for (error of errors; track error) {
+        <div>{{ error }}</div>
+      }
+    </div>
+  }
+  <div></div>
+</div>

npm/ng-packs/packages/components/abp-input/src/lib/abp-input.component.ts

@@ -0,0 +1,106 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  DestroyRef,
+  forwardRef,
+  inject,
+  OnInit,
+  input,
+  Injector
+} from '@angular/core';
+import {
+  AbstractControl,
+  ControlValueAccessor,
+  FormBuilder,
+  FormControl,
+  FormControlName,
+  FormGroup,
+  FormGroupDirective,
+  NG_VALUE_ACCESSOR,
+  NgControl,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { LocalizationPipe } from '@abp/ng.core';
+
+const ABP_INPUT_CONTROL_VALUE_ACCESSOR = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => AbpInputComponent),
+  multi: true,
+};
+
+@Component({
+  selector: 'abp-input',
+  templateUrl: './abp-input.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ReactiveFormsModule, LocalizationPipe],
+  exportAs: 'abpInput',
+  host: {
+    class: 'abp-input',
+  },
+  providers: [ABP_INPUT_CONTROL_VALUE_ACCESSOR],
+})
+export class AbpInputComponent implements OnInit, ControlValueAccessor {
+  label = input.required<string>();
+  type = input<'text' | 'number' | 'password'>('text');
+  id = input<string>('');
+  placeholder = input<string>('');
+  control: FormControl;
+  readonly formBuilder = inject(FormBuilder);
+  readonly changeDetectorRef = inject(ChangeDetectorRef);
+  readonly destroyRef = inject(DestroyRef);
+  readonly injector = inject(Injector);
+  abpInputFormGroup: FormGroup;
+
+  ngOnInit() {
+
+    const ngControl = this.injector.get(NgControl, null);
+    if (ngControl) {
+      this.control = this.injector.get(FormGroupDirective).getControl(ngControl as FormControlName);
+    }
+
+    this.abpInputFormGroup = this.formBuilder.group({
+      value: [''],
+    });
+
+    this.value.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(val => {
+      this.onChange(val);
+    });
+  }
+
+  writeValue(value: any[]): void {
+    this.value.setValue(value);
+    this.changeDetectorRef.markForCheck();
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    if (isDisabled) {
+      this.value.disable();
+    } else {
+      this.value.enable();
+    }
+  }
+
+  get errors(): string[] {
+    if (this.control && this.control.errors) {
+      return []
+    }
+    return []
+  }
+
+  get value(): AbstractControl<any> {
+    return this.abpInputFormGroup.get('value');
+  }
+
+  private onChange: (value: any) => void = () => {};
+  private onTouched: () => void = () => {};
+}

npm/ng-packs/packages/components/abp-input/src/public-api.ts

@@ -0,0 +1 @@
+export * from './lib/abp-input.component';

npm/ng-packs/packages/components/tsconfig.lib.json

@@ -10,6 +10,6 @@
     "lib": ["dom", "es2020"],
     "useDefineForClassFields": false
   },
-  "exclude": ["src/test-setup.ts", "**/*.spec.ts", "jest.config.ts"],
+  "exclude": ["test-setup.ts", "**/*.spec.ts", "jest.config.ts"],
   "include": ["**/*.ts"]
 }

npm/ng-packs/tsconfig.base.json

@@ -20,6 +20,7 @@
       "@abp/ng.account.core/proxy": ["packages/account-core/proxy/src/public-api.ts"],
       "@abp/ng.account/config": ["packages/account/config/src/public-api.ts"],
       "@abp/ng.components": ["packages/components/src/public-api.ts"],
+      "@abp/ng.components/abp-input": ["packages/components/abp-input/src/index.ts"],
       "@abp/ng.components/chart.js": ["packages/components/chart.js/src/public-api.ts"],
       "@abp/ng.components/extensible": ["packages/components/extensible/src/public-api.ts"],
       "@abp/ng.components/page": ["packages/components/page/src/public-api.ts"],