Merge pull request #1647 from abpframework/feature/form-keyup-listener-directive

refactor(theme-basic): change submit method name

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

@@ -22,6 +22,7 @@ import { EllipsisDirective } from './directives/ellipsis.directive';
 import { AutofocusDirective } from './directives/autofocus.directive';
 import { InputEventDebounceDirective } from './directives/debounce.directive';
 import { ClickEventStopPropagationDirective } from './directives/stop-propagation.directive';
+import { FormKeyupListenerDirective } from './directives/form-keyup-listener.directive';
 
 @NgModule({
   imports: [
@@ -39,6 +40,7 @@ import { ClickEventStopPropagationDirective } from './directives/stop-propagatio
     DynamicLayoutComponent,
     AutofocusDirective,
     EllipsisDirective,
+    FormKeyupListenerDirective,
     LocalizationPipe,
     PermissionDirective,
     VisibilityDirective,
@@ -55,6 +57,7 @@ import { ClickEventStopPropagationDirective } from './directives/stop-propagatio
     DynamicLayoutComponent,
     AutofocusDirective,
     EllipsisDirective,
+    FormKeyupListenerDirective,
     LocalizationPipe,
     PermissionDirective,
     VisibilityDirective,

npm/ng-packs/packages/core/src/lib/directives/form-keyup-listener.directive.ts

@@ -0,0 +1,23 @@
+import { Directive, ElementRef, EventEmitter, Output, OnDestroy } from '@angular/core';
+import { fromEvent } from 'rxjs';
+import { debounceTime, filter, tap } from 'rxjs/operators';
+import { takeUntilDestroy } from '../utils/rxjs-utils';
+
+@Directive({
+  selector: 'form[ngSubmit]',
+})
+export class FormKeyupListenerDirective implements OnDestroy {
+  @Output() ngSubmit = new EventEmitter();
+
+  constructor(private elRef: ElementRef) {
+    fromEvent(elRef.nativeElement as HTMLElement, 'keyup')
+      .pipe(
+        debounceTime(200),
+        filter((key: KeyboardEvent) => key && key.key === 'Enter'),
+        takeUntilDestroy(this),
+      )
+      .subscribe(() => this.ngSubmit.emit());
+  }
+
+  ngOnDestroy(): void {}
+}

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

@@ -1,4 +1,5 @@
 export * from './autofocus.directive';
 export * from './ellipsis.directive';
+export * from './form-keyup-listener.directive';
 export * from './permission.directive';
 export * from './visibility.directive';

npm/ng-packs/packages/theme-basic/src/lib/components/profile/profile.component.html

@@ -3,7 +3,7 @@
     <h4>{{ 'AbpIdentity::PersonalInfo' | abpLocalization }}</h4>
   </ng-template>
   <ng-template #abpBody>
-    <form novalidate *ngIf="form" [formGroup]="form" (ngSubmit)="onSubmit()">
+    <form novalidate *ngIf="form" [formGroup]="form" (ngSubmit)="submit()">
       <div class="form-group">
         <label for="username">{{ 'AbpIdentity::DisplayName:UserName' | abpLocalization }}</label
         ><span> * </span><input type="text" id="username" class="form-control" formControlName="userName" autofocus />
@@ -36,6 +36,6 @@
     <button #abpClose type="button" class="btn btn-secondary">
       {{ 'AbpIdentity::Cancel' | abpLocalization }}
     </button>
-    <abp-button iconClass="fa fa-check" (click)="onSubmit()">{{ 'AbpIdentity::Save' | abpLocalization }}</abp-button>
+    <abp-button iconClass="fa fa-check" (click)="submit()">{{ 'AbpIdentity::Save' | abpLocalization }}</abp-button>
   </ng-template>
 </abp-modal>

npm/ng-packs/packages/theme-basic/src/lib/components/profile/profile.component.ts

@@ -54,7 +54,7 @@ export class ProfileComponent implements OnChanges {
       });
   }
 
-  onSubmit() {
+  submit() {
     if (this.form.invalid) return;
     this.modalBusy = true;