Merge pull request #19269 from abpframework/sinan/ng0100

Fix NG0100 error in abp-modal which has abp-extensible-form in body

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

@@ -15,11 +15,10 @@ import {
   inject,
   Injector,
   Input,
-  OnChanges,
-  Optional,
+  OnChanges, Optional,
   SimpleChanges,
   SkipSelf,
-  ViewChild,
+  ViewChild
 } from '@angular/core';
 import {
   ControlContainer,
@@ -94,6 +93,7 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
   @Input() data!: PropData;
   @Input() prop!: FormProp;
   @Input() first?: boolean;
+  @Input() isFirstGroup?: boolean;
   @ViewChild('field') private fieldRef!: ElementRef<HTMLElement>;
 
   injectorForCustomComponent?: Injector;
@@ -124,10 +124,10 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
   search = (text$: Observable<string>) =>
     text$
       ? text$.pipe(
-          debounceTime(300),
-          distinctUntilChanged(),
-          switchMap(text => this.prop?.options?.(this.data, text) || of([])),
-        )
+        debounceTime(300),
+        distinctUntilChanged(),
+        switchMap(text => this.prop?.options?.(this.data, text) || of([])),
+      )
       : of([]);
 
   typeaheadFormatter = (option: ABP.Option<any>) => option.key;
@@ -154,9 +154,8 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
   }
 
   ngAfterViewInit() {
-    if (this.first && this.fieldRef) {
+    if (this.isFirstGroup && this.first && this.fieldRef) {
       this.fieldRef.nativeElement.focus();
-      this.cdRef.detectChanges();
     }
   }
 

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

@@ -1,5 +1,5 @@
 @if (form) {
-  @for (groupedProp of groupedPropList.items; track i; let i = $index) {
+  @for (groupedProp of groupedPropList.items; track i; let i = $index; let first = $first) {
     <ng-container *abpPropData="let data; fromList: groupedProp.formPropList; withRecord: record">
       @if (isAnyGroupMemberVisible(i, data) && groupedProp.group?.className) {
         <div
@@ -8,14 +8,14 @@
         >
           <ng-container
             [ngTemplateOutlet]="propListTemplate"
-            [ngTemplateOutletContext]="{ groupedProp: groupedProp, data: data }"
+            [ngTemplateOutletContext]="{ groupedProp: groupedProp, data: data, isFirstGroup: first}"
           >
           </ng-container>
         </div>
       } @else {
         <ng-container
           [ngTemplateOutlet]="propListTemplate"
-          [ngTemplateOutletContext]="{ groupedProp: groupedProp, data: data }"
+          [ngTemplateOutletContext]="{ groupedProp: groupedProp, data: data, isFirstGroup: first }"
         >
         </ng-container>
       }
@@ -23,8 +23,8 @@
   }
 }
 
-<ng-template let-groupedProp="groupedProp" let-data="data" #propListTemplate>
-  @for (prop of groupedProp.formPropList; let first = $first; track prop.name) {
+<ng-template let-groupedProp="groupedProp" let-data="data" let-isFirstGroup="isFirstGroup" #propListTemplate>
+  @for (prop of groupedProp.formPropList; let index = $index; let first = $first; track prop.name) {
     @if (prop.visible(data)) {
       @if (extraProperties.controls[prop.name]) {
         <ng-container [formGroupName]="extraPropertiesKey">
@@ -37,6 +37,7 @@
             [prop]="prop"
             [data]="data"
             [first]="first"
+            [isFirstGroup]="isFirstGroup"
           />
         }
       }