Merge pull request #23027 from abpframework/fix/#19985

Angular - Checkboxes are not checked after clicking their labels.

npm/ng-packs/packages/components/extensible/src/lib/components/multi-select/extensible-form-multiselect.component.ts

@@ -1,8 +1,9 @@
 import { Component, ChangeDetectionStrategy, forwardRef, input } from '@angular/core';
 import { NG_VALUE_ACCESSOR, ControlValueAccessor, ReactiveFormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
-import { ABP, LocalizationModule } from '@abp/ng.core';
+import { ABP, LocalizationPipe } from '@abp/ng.core';
 import { FormProp } from '../../models/form-props';
+import { NgxValidateCoreModule } from '@ngx-validate/core';
 
 const EXTENSIBLE_FORM_MULTI_SELECT_CONTROL_VALUE_ACCESSOR = {
   provide: NG_VALUE_ACCESSOR,
@@ -19,21 +20,24 @@ const EXTENSIBLE_FORM_MULTI_SELECT_CONTROL_VALUE_ACCESSOR = {
           <input
             type="checkbox"
             class="form-check-input"
+            [id]="'checkbox_' + option.value"
             [disabled]="disabled"
             [checked]="isChecked(option.value)"
             (change)="onCheckboxChange(option.value, $event.target.checked)"
           />
-          @if (prop().isExtra) {
-            {{ '::' + option.key | abpLocalization }}
-          } @else {
-            {{ option.key }}
-          }
+          <label [for]="'checkbox_' + option.value">
+            @if (prop().isExtra) {
+              {{ '::' + option.key | abpLocalization }}
+            } @else {
+              {{ option.key }}
+            }
+          </label>
         </div>
       }
     </div>
   `,
   providers: [EXTENSIBLE_FORM_MULTI_SELECT_CONTROL_VALUE_ACCESSOR],
-  imports: [LocalizationModule, CommonModule, ReactiveFormsModule],
+  imports: [LocalizationPipe, CommonModule, ReactiveFormsModule, NgxValidateCoreModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ExtensibleFormMultiselectComponent implements ControlValueAccessor {