角度：多选下拉列表ID

Question

I have created a multi select dropdown with checkbox following this post: https://github.com/NileshPatel17/ng-multiselect-dropdown

As below:

<div (mouseleave)="showDropDown = false" [class.disabled]="disabled">
  <button class="drop-toggle btn flat" (click)="showDropDown=!showDropDown">
    <span *ngIf="checkedList.length <= 0">{{_placeholder}}</span>
    <span *ngIf="checkedList.length > 0">{{buttonText()}}</span>   
    <i class="fa fa-angle-down"></i>
  </button>
  <div class="drop-show" *ngIf="showDropDown" >
    <label *ngFor="let item of _data">
      <input type="checkbox" value="item.id" [(ngModel)]="item.checked" (change)="getSelectedValue(item)" />
      <span>{{item.text}}</span>
    </label>
  </div> 
</div>

export class MultiselectDropdownComponent implements OnInit {
  public _settings: IDropdownSettings;
  public _data: Array<ListItem> = [];
  public selectedItems: Array<ListItem> = [];
  public isDropdownOpen = false;
  showDropDown = false;
  _placeholder = 'Select';
  _selectedPlaceholder = 'Selected';
  defaultSettings: IDropdownSettings = {
    singleSelection: false,
    idField: 'id',
    textField: 'text',
    limitSelection: -1,
    maxHeight: 150,
    itemsShowLimit: 5,
    searchPlaceholderText: 'Search',
    noDataAvailablePlaceholderText: 'No data available',
    closeDropDownOnSelection: false,
    showSelectedItemsAtTop: false
  };

  @Input()
  public set placeholder(value: string) {
    if (value) {
      this._placeholder = value;
    } else {
      this._placeholder = 'Select';
    }
  }
  @Input()
  public set selectedPlaceholder(value: string) {
    if (value) {
      this._selectedPlaceholder = value;
    } else {
      this._selectedPlaceholder = 'Selected';
    }
  }
  @Input()
  disabled = false;

  @Input()
  public set settings(value: IDropdownSettings) {
    if (value) {
      this._settings = Object.assign(this.defaultSettings, value);
    } else {
      this._settings = Object.assign(this.defaultSettings);
    }
  }

  @Input()
  public list: any[];
  @Input()
  public set data(value: Array<any>) {
    if (!value) {
      this._data = [];
    } else {
      this._data = value.map(
        (item: any) =>
          typeof item === 'string'
            ? new ListItem(item)
            : new ListItem({
              id: item[this._settings.idField],
              text: item[this._settings.textField]
            })
      );
    }
  }

  @Output()
  shareCheckedList = new EventEmitter();
  @Output()
  shareIndividualCheckedList = new EventEmitter();
  checkedList: Array<ListItem> = [];
  currentSelected: {};

  constructor() { }

  getSelectedValue(item) {
    if (item.checked) {
      this.checkedList.push(new ListItem({ id: item.id, text: item.text }));
    } else {
      const index = this.checkedList.findIndex(i => i.id === item.id);
      this.checkedList.splice(index, 1);
    }

    this.currentSelected = { checked: item.checked, id: item.id };

    // share checked list
    this.shareCheckedlist();

    // share individual selected item
    this.shareIndividualStatus();
  }
  itemShowRemaining(): number {
    return this.checkedList.length - this._settings.itemsShowLimit;
  }
  isAllItemsSelected(): boolean {
    return this._data.length === this.checkedList.length;
  }
  shareCheckedlist() {
    this.shareCheckedList.emit(this.checkedList);
  }
  shareIndividualStatus() {
    this.shareIndividualCheckedList.emit(this.currentSelected);
  }
  buttonText() {
    if (this.checkedList.length > this._settings.itemsShowLimit) {
      return this.checkedList.length + ' ' + this._selectedPlaceholder;
    } else {
      let selected = '';
      const delimiter = ', ';
      this.checkedList.forEach(item => {
        selected += item.text + delimiter;
      });
      return selected.substr(0, selected.length - 2);
    }
  }

  unSelectAll() {
    this.checkedList = [];
    this._data.forEach(item => {
      item['checked'] = false;
    });
  }

  ngOnInit() {
    this.checkedList = [];
  }
}

I use this in my child component as:

<div class="col-sm-6">
  <ct-multiselect-dropdown [data]="myData"
                           [settings]="multiDropdownSettings"
                           [placeholder]="'Select Data'"
                           [selectedPlaceholder]="'Data Selected'"></ct-multiselect-dropdown>
</div>

There is a button click on my parent component as:

submitClicked() {
}

With other controls as text input on my child control I can do as below to check if they are empty or not:

this.myForm.get('mycontrol').value;

But how can I do so with my multi select control above.

Or if there is some other way from my button click control in my parent to identify if this control has some data selected or not

Thanks

Answer 1

I checked the repo and seems they are implementing ControlValueAccessor which is slightly different than yours and seems name is changed as well, However based on their latest code you can use formControlName to associate it with reactive code and then you will have the value

export class MultiSelectComponent implements ControlValueAccessor

<ct-multiselect-dropdown [data]="myData"
                           [settings]="multiDropdownSettings"
                           [placeholder]="'Select Data'"
                           [selectedPlaceholder]="'Data Selected'"
                           formControlName="yourControlNameHere"
    ></ct-multiselect-dropdown>