feature(core): add ng-model component

npm/ng-packs/package.json

@@ -31,7 +31,6 @@
     "@types/jasmine": "~3.3.8",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "~8.9.4",
-    "@volo/abp.ng.cli": "^1.0.1",
     "angular-oauth2-oidc": "^8.0.1",
     "bootstrap": "^4.3.1",
     "codelyzer": "^5.0.0",
@@ -60,8 +59,5 @@
     "zone.js": "~0.9.1",
     "just-clone": "3.1.0",
     "chart.js": "^2.8.0"
-  },
-  "dependencies": {
-    "tslib": "^1.10.0"
   }
 }

npm/ng-packs/packages/core/src/lib/abstracts/index.ts

@@ -0,0 +1 @@
+export * from './ng-model.component';

npm/ng-packs/packages/core/src/lib/abstracts/ng-model.component.ts

@@ -0,0 +1,51 @@
+import { ControlValueAccessor } from '@angular/forms';
+import { ChangeDetectorRef, Component, Injector, Input, Type } from '@angular/core';
+
+@Component({ template: '' })
+export class AbstractNgModelComponent<T = any> implements ControlValueAccessor {
+  @Input()
+  disabled: boolean;
+
+  @Input()
+  set value(value: T) {
+    this._value = value;
+    this.notifyValueChange();
+  }
+
+  get value(): T {
+    return this._value;
+  }
+
+  onChange: (value: T) => {};
+  onTouched: () => {};
+
+  protected _value: T;
+  protected cdRef: ChangeDetectorRef;
+
+  constructor(public injector: Injector) {
+    this.cdRef = injector.get<ChangeDetectorRef>(ChangeDetectorRef as Type<ChangeDetectorRef>);
+  }
+
+  notifyValueChange(): void {
+    if (this.onChange) {
+      this.onChange(this.value);
+    }
+  }
+
+  writeValue(value: T): void {
+    this._value = value;
+    setTimeout(() => this.cdRef.detectChanges(), 0);
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+}

npm/ng-packs/packages/core/src/lib/core.module.ts

@@ -25,6 +25,7 @@ import { SessionState } from './states/session.state';
 import { getInitialData, localeInitializer } from './utils/initial-utils';
 import { ConfigPlugin, NGXS_CONFIG_PLUGIN_OPTIONS } from './plugins/config/config.plugin';
 import { ForDirective } from './directives/for.directive';
+import { AbstractNgModelComponent } from './abstracts/ng-model.component';
 
 @NgModule({
   imports: [
@@ -49,6 +50,7 @@ import { ForDirective } from './directives/for.directive';
     VisibilityDirective,
     InputEventDebounceDirective,
     ClickEventStopPropagationDirective,
+    AbstractNgModelComponent,
   ],
   exports: [
     CommonModule,
@@ -68,6 +70,7 @@ import { ForDirective } from './directives/for.directive';
     InputEventDebounceDirective,
     LocalizationPipe,
     ClickEventStopPropagationDirective,
+    AbstractNgModelComponent,
   ],
   providers: [LocalizationPipe],
   entryComponents: [RouterOutletComponent, DynamicLayoutComponent],

npm/ng-packs/packages/core/src/public-api.ts

@@ -3,6 +3,7 @@
  */
 
 // export * from './lib/handlers';
+export * from './lib/abstracts';
 export * from './lib/actions';
 export * from './lib/components';
 export * from './lib/constants';