Angular UI: Change ngx-validate target selector #8120

npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings-half-row.component.ts

@@ -9,7 +9,7 @@ import { UntypedFormGroup } from '@angular/forms';
 @Component({
   selector: 'abp-personal-settings-half-row',
   template: ` <div class="w-50 d-inline">
-    <div class="mb-3 form-group">
+    <div class="mb-3">
       <label [attr.for]="name" class="form-label">{{ displayName | abpLocalization }} </label>
       <input
         type="text"

npm/ng-packs/packages/theme-basic/src/lib/theme-basic.module.ts

@@ -28,35 +28,35 @@ import { BASIC_THEME_USER_MENU_PROVIDERS } from './providers/user-menu.provider'
 export const LAYOUTS = [ApplicationLayoutComponent, AccountLayoutComponent, EmptyLayoutComponent];
 
 @NgModule({
-    declarations: [
-        ...LAYOUTS,
-        ValidationErrorComponent,
-        LogoComponent,
-        NavItemsComponent,
-        RoutesComponent,
-        CurrentUserComponent,
-        LanguagesComponent,
-        PageAlertContainerComponent,
-        TenantBoxComponent,
-        AuthWrapperComponent,
-    ],
-    exports: [
-        ...LAYOUTS,
-        ValidationErrorComponent,
-        LogoComponent,
-        NavItemsComponent,
-        RoutesComponent,
-        CurrentUserComponent,
-        LanguagesComponent,
-        PageAlertContainerComponent,
-    ],
-    imports: [
-        CoreModule,
-        ThemeSharedModule,
-        NgbCollapseModule,
-        NgbDropdownModule,
-        NgxValidateCoreModule,
-    ]
+  declarations: [
+    ...LAYOUTS,
+    ValidationErrorComponent,
+    LogoComponent,
+    NavItemsComponent,
+    RoutesComponent,
+    CurrentUserComponent,
+    LanguagesComponent,
+    PageAlertContainerComponent,
+    TenantBoxComponent,
+    AuthWrapperComponent,
+  ],
+  exports: [
+    ...LAYOUTS,
+    ValidationErrorComponent,
+    LogoComponent,
+    NavItemsComponent,
+    RoutesComponent,
+    CurrentUserComponent,
+    LanguagesComponent,
+    PageAlertContainerComponent,
+  ],
+  imports: [
+    CoreModule,
+    ThemeSharedModule,
+    NgbCollapseModule,
+    NgbDropdownModule,
+    NgxValidateCoreModule,
+  ],
 })
 export class BaseThemeBasicModule {}
 
@@ -78,7 +78,7 @@ export class ThemeBasicModule {
         },
         {
           provide: VALIDATION_TARGET_SELECTOR,
-          useValue: '.form-group',
+          useValue: '*:has(> .form-control)',
         },
         {
           provide: VALIDATION_INVALID_CLASSES,

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

@@ -7,7 +7,7 @@
     </ng-container>
   </ng-template>
 
-  <div [ngClass]="containerClassName" class="mb-3 form-group">
+  <div [ngClass]="containerClassName" class="mb-3">
     <ng-template ngSwitchCase="input">
       <ng-template [ngTemplateOutlet]="label"></ng-template>
       <input

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

@@ -60,7 +60,7 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
 
   asterisk = '';
 
-  containerClassName = 'mb-3 form-group';
+  containerClassName = 'mb-3';
 
   options$: Observable<ABP.Option<any>[]> = of([]);