Merge pull request #9392 from abpframework/feat/volo-7138

Angular UI: Trigger focus on first element of extensible form

npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html

@@ -2,6 +2,7 @@
   <ng-template ngSwitchCase="input">
     <ng-template [ngTemplateOutlet]="label"></ng-template>
     <input
+      #field
       [id]="prop.id"
       [formControlName]="prop.name"
       [autocomplete]="prop.autocomplete"
@@ -19,6 +20,7 @@
   <ng-template ngSwitchCase="checkbox">
     <div class="custom-checkbox custom-control" validationTarget>
       <input
+        #field
         [id]="prop.id"
         [formControlName]="prop.name"
         [abpDisabled]="disabled"
@@ -35,6 +37,7 @@
   <ng-template ngSwitchCase="select">
     <ng-template [ngTemplateOutlet]="label"></ng-template>
     <select
+      #field
       [id]="prop.id"
       [formControlName]="prop.name"
       [abpDisabled]="disabled"
@@ -52,6 +55,7 @@
   <ng-template ngSwitchCase="multiselect">
     <ng-template [ngTemplateOutlet]="label"></ng-template>
     <select
+      #field
       [id]="prop.id"
       [formControlName]="prop.name"
       [abpDisabled]="disabled"
@@ -71,6 +75,7 @@
     <ng-template [ngTemplateOutlet]="label"></ng-template>
     <div #typeahead class="position-relative" validationStyle validationTarget>
       <input
+        #field
         [id]="prop.id"
         [autocomplete]="prop.autocomplete"
         [abpDisabled]="disabled"
@@ -116,6 +121,7 @@
   <ng-template ngSwitchCase="textarea">
     <ng-template [ngTemplateOutlet]="label"></ng-template>
     <textarea
+      #field
       [id]="prop.id"
       [formControlName]="prop.name"
       [abpDisabled]="disabled"

npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts

@@ -1,13 +1,16 @@
 import { ABP, AbpValidators, ConfigStateService, TrackByService } from '@abp/ng.core';
 import {
+  AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  ElementRef,
   Input,
   OnChanges,
   Optional,
   SimpleChanges,
   SkipSelf,
+  ViewChild,
 } from '@angular/core';
 import {
   ControlContainer,
@@ -43,11 +46,15 @@ import { addTypeaheadTextSuffix } from '../../utils/typeahead.util';
     { provide: NgbTimeAdapter, useClass: TimeAdapter },
   ],
 })
-export class ExtensibleFormPropComponent implements OnChanges {
+export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
   @Input() data: PropData;
 
   @Input() prop: FormProp;
 
+  @Input() first: boolean;
+
+  @ViewChild('field') private fieldRef: ElementRef<HTMLElement>;
+
   asterisk = '';
 
   options$: Observable<ABP.Option<any>[]> = of([]);
@@ -116,6 +123,12 @@ export class ExtensibleFormPropComponent implements OnChanges {
     this.asterisk = this.validators.some(isRequired) ? '*' : '';
   }
 
+  ngAfterViewInit() {
+    if (this.first && this.fieldRef) {
+      this.fieldRef.nativeElement.focus();
+    }
+  }
+
   getComponent(prop: FormProp): string {
     switch (prop.type) {
       case ePropType.Boolean:

npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.html

@@ -1,6 +1,6 @@
 <ng-container *ngIf="form">
   <ng-container *abpPropData="let data; fromList: propList; withRecord: record">
-    <ng-container *ngFor="let prop of propList; trackBy: track.by('name')">
+    <ng-container *ngFor="let prop of propList; let first = first; trackBy: track.by('name')">
       <ng-container *ngIf="prop.visible(data)">
         <ng-container
           [formGroupName]="extraPropertiesKey"
@@ -14,6 +14,7 @@
             *ngIf="form.get(prop.name)"
             [prop]="prop"
             [data]="data"
+            [first]="first"
           ></abp-extensible-form-prop>
         </ng-template>
       </ng-container>