如何在Anguar7中将“ ng-multiselect-dropdown”设置为必填字段？

Question

如何使ng-multiselect-dropdown为必填字段，该字段必须至少接受一个选定的项目？

<ng-multiselect-dropdown
    [placeholder]="'Select countries'"
    [data]="countries"
    [(ngModel)]="countriesSelectedItems"
    [settings]="countriesDropdownSettings"
    (onSelect)="onItemSelect($event)"
    (onSelectAll)="onSelectAll($event)"
    name="countries"
    class="form-control">
</ng-multiselect-dropdown>

Answer 1

npmjs.org上没有关于它的文档

因此，我们采用在Angular中以模板驱动形式根据需要创建任何字段的方法。

相关 html ：

<form (ngSubmit)='submission()'>
    <ng-multiselect-dropdown [placeholder]="'custom placeholder'" [data]="dropdownList" [(ngModel)]="selectedItems" [settings]="dropdownSettings"
     (onSelect)="onItemSelect($event)" (onSelectAll)="onSelectAll($event)" [required]='requiredField' [ngClass]='setClass()'
     name='countrySelect'>
    </ng-multiselect-dropdown>
    <p *ngIf="!requiredField">
        You must select a value !!
    </p>
    <br/>
        <button type='submit'>submit</button>
</form>

相关的 TS ：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular 5';
  dropdownList = [];
  selectedItems = [];
  dropdownSettings = {};
  requiredField: boolean = false;

  ngOnInit() {

    this.dropdownList = [
      { "item_id": 1, "item_text": "India" },
      { "item_id": 2, "item_text": "Singapore" },
      { "item_id": 3, "item_text": "Australia" },
      { "item_id": 4, "item_text": "Canada" },
      { "item_id": 5, "item_text": "Pakistan" },
      { "item_id": 6, "item_text": "Japan" }
    ];

    this.selectedItems = [
      { "item_id": 2, "item_text": "Singapore" },
      { "item_id": 3, "item_text": "Australia" }
    ];

    this.dropdownSettings = {
      singleSelection: false,
      idField: 'item_id',
      textField: 'item_text',
      selectAllText: 'Select All',
      unSelectAllText: 'UnSelect All',
      itemsShowLimit: 3,
      allowSearchFilter: true
    };
    this.setStatus();
  }

  setStatus() {
    (this.selectedItems.length > 0) ? this.requiredField = true : this.requiredField = false;
  }

  onItemSelect(item: any) {
    //Do something if required
    this.setClass();
  }
  onSelectAll(items: any) {
    //Do something if required
    this.setClass();
  }

  setClass() {
    this.setStatus();
    if (this.selectedItems.length > 0) { return 'validField' }
    else { return 'invalidField' }
  }
  submission() {
    if (this.requiredField == false) {
      /* Print a message that not all required fields were filled... */
    }
    /* Do form submission... */
  }

}

相关的 css ：

.validField {  border:2px solid green; display: block;  }
.invalidField {  border:2px solid red; display: block;  }

::ng-deep .multiselect-dropdown .dropdown-btn {width: -webkit-fill-available !important}
::ng-deep .multiselect-dropdown .dropdown-btn:focus {outline: none !important}

完成工作stackblitz available here