ng-multiselect-dropdown 数据绑定错误

Question

我试图使用 ngmodel 绑定 ng-multiselect-drowdown 中的选定项目，但出现错误并且绑定不起作用。 “错误错误：如果在表单标记中使用 ngModel，则必须设置 name 属性或必须在 ngModelOptions 中将 form.control 定义为 'standalone'。”

我是不是漏掉了什么？谢谢

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>

ts

  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);
  }

截图

Answer 1

当您使用 [(ngModel)]="someValue" 时，您必须使用名称，或者如果您不想使用名称，只需设置 [ngModelOptions]="{standalone: true}"。因为当我们将 [(ngModel)] 与元素一起使用时，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>

ng-multiselect-dropdown 数据绑定错误

ng-multiselect-dropdown data binding error

angular

ng-multiselect-dropdown