ng-multiselect-dropdown data binding error

Question

I was trying to use ngmodel to bind selected item in ng-multiselect-drowdown, but get error and the binding doesn't work. "ERROR Error: If ngModel is used within a form tag, either the name attribute must be set or the form. control must be defined as 'standalone' in ngModelOptions."

Did I miss something there? Thanks.

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

screenshot

Answer 1

You have to use a name when you are using [(ngModel)]="someValue" or if you don't want to use name just set [ngModelOptions]="{standalone: true}". Because when we use [(ngModel)] with an element , angular internally uses element name to register the element with the NgForm directive which is attached to parent form element. using ngModelOptions="{standalone: true}" means telling angular not to include this element to form.

 <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>

Answer 2

this.existingGuideLib= [...this.existingGuideLib] 

creates a shallow copy of the this.existingGuideLib array and assigns it back to this.existingGuideLib, triggering change detection in Angular.

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