Question

我在此帖子后创建了带复选框的多选下拉列表： https://github.com/NileshPatel17/ng-multiselect-dropdown

如下：

<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 = [];
  }
}

我在子组件中将其用作：

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

在我的父组件上有一个按钮，单击为：

submitClicked() {
}

使用其他控件作为子控件上的文本输入时，我可以执行以下操作以检查它们是否为空：

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

但是如何使用上面的多选控件来做到这一点。

或者如果通过我父母中的按钮单击控件还有其他方法可以识别此控件是否选择了某些数据

谢谢

Answer 1

我检查了该存储库，似乎他们执行的ControlValueAccessor与您的稍有不同，并且名称也有所更改，但是，根据他们的最新代码，您可以使用formControlName将其与反应式关联代码，然后您将获得值

export class MultiSelectComponent implements ControlValueAccessor

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

角度：多选下拉列表ID

1 个答案: