Merge pull request #22363 from abpframework/feature/#19471

Angular - Scope Selection

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

@@ -22,7 +22,7 @@
         />
       }
       @case ('hidden') {
-        <input [formControlName]="prop.name" type="hidden" />
+        <input [formControlName]="prop.name" type="hidden"/>
       }
       @case ('checkbox') {
         <div class="form-check" validationTarget>
@@ -62,24 +62,11 @@
       }
       @case ('multiselect') {
         <ng-template [ngTemplateOutlet]="label"></ng-template>
-        <select
+        <abp-extensible-form-multi-select
-          #field
+          [prop]="prop"
-          [id]="prop.id"
+          [options]="options$ | async"
           [formControlName]="prop.name"
-          [abpDisabled]="disabled"
+          [abpDisabled]="disabled"/>
-          multiple="multiple"
-          class="form-select form-control"
-        >
-          @for (option of options$ | async; track option.value) {
-            <option [ngValue]="option.value">
-              @if (prop.isExtra) {
-                {{ '::' + option.key | abpLocalization }}
-              } @else {
-                {{ option.key }}
-              }
-            </option>
-          }
-        </select>
       }
       @case ('typeahead') {
         <ng-template [ngTemplateOutlet]="label"></ng-template>
@@ -100,7 +87,7 @@
             [class.is-invalid]="typeahead.classList.contains('is-invalid')"
             class="form-control"
           />
-          <input [formControlName]="prop.name" type="hidden" />
+          <input [formControlName]="prop.name" type="hidden"/>
         </div>
       }
       @case ('date') {
@@ -122,7 +109,7 @@
       }
       @case ('dateTime') {
         <ng-template [ngTemplateOutlet]="label"></ng-template>
-        <abp-extensible-date-time-picker [prop]="prop" [meridian]="meridian$ | async" />
+        <abp-extensible-date-time-picker [prop]="prop" [meridian]="meridian$ | async"/>
       }
       @case ('textarea') {
         <ng-template [ngTemplateOutlet]="label"></ng-template>

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

@@ -49,12 +49,14 @@ import { NgxValidateCoreModule } from '@ngx-validate/core';
 import { ExtensibleFormPropService } from '../../services/extensible-form-prop.service';
 import { CommonModule } from '@angular/common';
 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
+import { ExtensibleFormMultiselectComponent } from '../multi-select/extensible-form-multiselect.component';
 
 @Component({
   selector: 'abp-extensible-form-prop',
   templateUrl: './extensible-form-prop.component.html',
   imports: [
     ExtensibleDateTimePickerComponent,
+    ExtensibleFormMultiselectComponent,
     NgbDatepickerModule,
     NgbTimepickerModule,
     ReactiveFormsModule,

npm/ng-packs/packages/components/extensible/src/lib/components/index.ts

@@ -5,3 +5,4 @@ export * from './extensible-table/extensible-table.component';
 export * from './date-time-picker/extensible-date-time-picker.component';
 export * from './grid-actions/grid-actions.component';
 export * from './page-toolbar/page-toolbar.component';
+export * from './multi-select/extensible-form-multiselect.component';

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

@@ -0,0 +1,77 @@
+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 { FormProp } from '../../models/form-props';
+
+const EXTENSIBLE_FORM_MULTI_SELECT_CONTROL_VALUE_ACCESSOR = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => ExtensibleFormMultiselectComponent),
+  multi: true,
+};
+
+@Component({
+  selector: 'abp-extensible-form-multi-select',
+  template: `
+    <div [id]="prop().id">
+      @for (option of options(); track option.value) {
+        <div class="form-check" validationTarget>
+          <input
+            type="checkbox"
+            class="form-check-input"
+            [disabled]="disabled"
+            [checked]="isChecked(option.value)"
+            (change)="onCheckboxChange(option.value, $event.target.checked)"
+          />
+          @if (prop().isExtra) {
+            {{ '::' + option.key | abpLocalization }}
+          } @else {
+            {{ option.key }}
+          }
+        </div>
+      }
+    </div>
+  `,
+  providers: [EXTENSIBLE_FORM_MULTI_SELECT_CONTROL_VALUE_ACCESSOR],
+  imports: [LocalizationModule, CommonModule, ReactiveFormsModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ExtensibleFormMultiselectComponent implements ControlValueAccessor {
+  prop = input.required<FormProp>();
+  options = input.required<ABP.Option<any>[]>();
+
+  selectedValues: any[] = [];
+  disabled = false;
+
+  private onChange: (value: any) => void = () => {};
+  private onTouched: () => void = () => {};
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  isChecked(value: any): boolean {
+    return this.selectedValues.includes(value);
+  }
+
+  onCheckboxChange(value: any, checked: boolean): void {
+    this.selectedValues = checked
+      ? [...this.selectedValues, value]
+      : this.selectedValues.filter(item => item !== value);
+
+    this.onChange(this.selectedValues);
+    this.onTouched();
+  }
+
+  writeValue(value: any[]): void {
+    this.selectedValues = Array.isArray(value) ? [...value] : [];
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+}

npm/ng-packs/packages/components/extensible/src/lib/components/multi-select/index.ts

@@ -0,0 +1 @@
+export * from './extensible-form-multiselect.component';

npm/ng-packs/packages/components/extensible/src/lib/extensible.module.ts

@@ -16,6 +16,7 @@ import {
   GridActionsComponent,
   PageToolbarComponent,
   ExtensibleDateTimePickerComponent,
+  ExtensibleFormMultiselectComponent,
 } from './components';
 import { PropDataDirective } from './directives/prop-data.directive';
 import { CreateInjectorPipe } from './pipes/create-injector.pipe';
@@ -31,7 +32,9 @@ const importWithExport = [
   CreateInjectorPipe,
   ExtensibleFormComponent,
   ExtensibleTableComponent,
+  ExtensibleFormMultiselectComponent,
 ];
+
 @NgModule({
   declarations: [],
   imports: [

npm/ng-packs/packages/components/extensible/src/public-api.ts

@@ -4,6 +4,7 @@ export * from './lib/components/extensible-form/extensible-form.component';
 export * from './lib/components/extensible-table/extensible-table.component';
 export * from './lib/components/grid-actions/grid-actions.component';
 export * from './lib/components/page-toolbar/page-toolbar.component';
+export * from './lib/components/multi-select';
 export * from './lib/constants/extra-properties';
 export * from './lib/directives/prop-data.directive';
 export * from './lib/enums/props.enum';