How to bind angular FormArray to ngx-select-dropdown

Question

I'm writing angular7 single page web application using ReactiveForms. I need to list collection of customers in a searchable dropdown list and for that I'm trying to use ngx-select-dropdown (https://www.npmjs.com/package/ngx-select-dropdown)

My customer class looks like below

export class Customer{
  public id:number;
  public name:string;

  constructor(cusId:number, cusName:string){
    this.id = cusId;
    this.name = cusName;
  }
}

My component class looks like this

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, FormArray } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  public myForm: FormGroup;
  constructor(private formBuilder: FormBuilder) {
  }
  ngOnInit() {
    this.myForm = this.formBuilder.group({
      selectedCustomer: [],
      customers: this.formBuilder.array([
        new Customer(0, "Andrew"),
        new Customer(1, "Steve"),
        new Customer(2, "Frank"),
        new Customer(3, "Jimmie")
      ])
    })
  }
}

My HTML template looks like this

<div [formGroup]="myForm">
  <ngx-select-dropdown formControlName="customers"></ngx-select-dropdown>
</div>

What I want is customers dropdown list with following options.

dropdown should be searchable.
dropdown should be single select.
when an item is selected, "selectedCustomer" form control should be updated. (see the "Single Select Dropdown" example in this demo: https://manishjanky.github.io/ngx-select-dropdown/)

I've added a sample project in stackblitz

First off, if you're looking to create a form for a selected customer, you don't put all the customers in the form. Those will be your options and a single uninitialized customer is what goes in the form. After that, I'd recommend reading up on the ngx-select-dropdown [docs](https://www.npmjs.com/package/ngx-select-dropdown) as it doesn't look like you've attempted to implement it correctly at all. — Frederick, Jun 17 '19 at 14:48
@Freddy, thank you for your comment. But my requirement binding form array in a dropdown list. This is just a simple part I shared to deliver my issue. I have many arrays related to "Customer" and I need to bind them also in dropdowns (ex: CustomerType, CustomerProvince etc...). Also I red the ng-select-dropdown document but it didn't help me. It has very lack of information. — Prabodha, Jun 18 '19 at 02:37
@Prabodha yo are actually doing it wrong. All yo customers should be passed as an array to the input property `[options]` and all the customers will appear in the list also in the config pass`search: true` and the dropdown will be searchable. Please refer the docs for more details https://github.com/manishjanky/ngx-select-dropdown. — Manish, Nov 13 '19 at 08:10

score 0 · Answer 1 · answered Mar 05 '20 at 05:06

Here is a working sample on how to do this.And the code. Also as suggested in the comment above the component needs an array of options. Please read the documentation for more details

HTML

<div [formGroup]="myForm">
  <ngx-select-dropdown  [config]="config" [options]="custOptions" formControlName="customers"></ngx-select-dropdown>
</div>

TS

import { Component, OnInit } from "@angular/core";
import { FormGroup, FormBuilder, FormArray } from "@angular/forms";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  public myForm: FormGroup;
  config={
    search:true,
    displayKey:'name'
  }
  custOptions = [
        new Customer(0, "Andrew"),
        new Customer(1, "Steve"),
        new Customer(2, "Frank"),
        new Customer(3, "Jimmie")
      ];
  constructor(private formBuilder: FormBuilder) {}
  ngOnInit() {
    this.myForm = this.formBuilder.group({
      selectedCustomer: [],
      customers: [""]
    });
  }
}

export class Customer {
  public id: number;
  public name: string;

  constructor(cusId: number, cusName: string) {
    this.id = cusId;
    this.name = cusName;
  }
}

Hope this helps :)

How to bind angular FormArray to ngx-select-dropdown

1 Answers1