ng-multiselect-dropdown 数据绑定错误答案

【问题标题】：ng-multiselect-dropdown data binding errorng-multiselect-dropdown 数据绑定错误
【发布时间】：2021-07-16 14:42:49
【问题描述】：

我试图使用 ngmodel 绑定 ng-multiselect-drowdown 中的选定项目，但出现错误并且绑定不起作用。 “ERROR 错误：如果在表单标签中使用 ngModel，则必须设置名称属性或表单。控件必须在 ngModelOptions 中定义为‘独立’。”

我错过了什么吗？谢谢。

html

    <div class="form-group">
        <input type="text"  name="screenLibName"  class="form-control" placeholder="*Type in Screen Library Name" [(ngModel)]="input.screenLibName" required maxlength="30"/>
        <ng-multiselect-dropdown
            [placeholder]="'Select from Source Library'"
            [data]="existingGuideLib"
            [(ngModel)]="selectedSourceLibs"
            [settings]="dropdownSettings"
            (onSelect)="onItemSelect($event)"
            (onSelectAll)="onSelectAll($event)" 
        ></ng-multiselect-dropdown>
    </div>

  existingGuideLib:GuideLibrary[] = [];
  public selectedSourceLibs: any = [];
  dropdownSettings: IDropdownSettings;

   ngOnInit(): void {
    this.resetForm();

    this.dropdownSettings = {
      singleSelection: false,
      idField: 'ID', 
      textField: 'Name', 
      selectAllText: 'Select All',
      unSelectAllText: 'UnSelect All',
      itemsShowLimit: 5,
      allowSearchFilter: true
    };


    this.guideLibService.getAllGuideLib().subscribe(
      data => {
        console.log(data);
        this.existingGuideLib = data;
      },
      error => {
        console.log(error.message);
        this.openDialog("Failed to get existing projectID: " + error.message);
      }
    )
  }
     
  onItemSelect(item: any) {
  }

  onSelectAll(items: any) {
    console.log(items);
  }

截图

【问题讨论】：

使用 [formControl] 而不是 [(ngModel)]

标签： angular ng-multiselect-dropdown

【解决方案1】：

在使用 [(ngModel)]="someValue" 时必须使用名称，或者如果您不想使用名称，只需设置 [ngModelOptions]="{standalone: true}"。因为当我们将 [(ngModel)] 与 element 一起使用时，Angular 在内部使用元素名称将元素注册到附加到父表单元素的 NgForm 指令中。使用 ngModelOptions="{standalone: true}" 意味着告诉 Angular 不要包含这个元素来形成。

 <ng-multiselect-dropdown
        [placeholder]="'Select from Source Library'"
        [data]="existingGuideLib"
        [(ngModel)]="selectedSourceLibs"
        [settings]="dropdownSettings"
        (onSelect)="onItemSelect($event)"
        (onSelectAll)="onSelectAll($event)" 
        [ngModelOptions]="{standalone: true}"
    ></ng-multiselect-dropdown>

【讨论】：