如何将角度 FormArray 绑定到 ngx-select-dropdown答案

【问题标题】：How to bind angular FormArray to ngx-select-dropdown如何将角度 FormArray 绑定到 ngx-select-dropdown
【发布时间】：2019-10-31 03:12:51
【问题描述】：

我正在使用 ReactiveForms 编写 angular7 单页 Web 应用程序。我需要在可搜索的下拉列表中列出客户集合，为此我正在尝试使用ngx-select-dropdown (https://www.npmjs.com/package/ngx-select-dropdown)

我的客户类如下所示

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

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

我的组件类是这样的

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")
      ])
    })
  }
}

我的 HTML 模板如下所示

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

我想要的是带有以下选项的客户下拉列表。

下拉菜单应该是可搜索的。
下拉菜单应该是单选。
当一个项目被选中时，“selectedCustomer”表单控件应该被更新。（请参阅此演示中的“单选下拉菜单”示例：https://manishjanky.github.io/ngx-select-dropdown/）

我在stackblitz添加了一个示例项目

【问题讨论】：

首先，如果您要为选定的客户创建表单，则不要将所有客户都放入表单中。这些将是您的选择，一个未初始化的客户就是表格中的内容。在那之后，我建议您阅读 ngx-select-dropdown docs，因为您似乎根本没有尝试正确实现它。
@Freddy，感谢您的评论。但我要求在下拉列表中绑定表单数组。这只是我分享的一个简单部分，用于解决我的问题。我有许多与“客户”相关的数组，我还需要在下拉列表中绑定它们（例如：CustomerType、CustomerProvince 等...）。我也将 ng-select-dropdown 文档变红，但它对我没有帮助。它非常缺乏信息。
@Prabodha 哟实际上做错了。所有 yo 客户都应作为数组传递给输入属性[options]，所有客户也将出现在列表中，配置 passsearch: true 并且下拉列表将是可搜索的。请参阅文档以获取更多详细信息github.com/manishjanky/ngx-select-dropdown。

标签： angular angular7 angular8 angular-reactive-forms ngx-select-dropdown

【解决方案1】：

这里有一个working sample 说明如何执行此操作。还有代码。同样正如上面评论中所建议的，该组件需要一系列选项。请阅读documentation了解更多详情

HTML

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

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

希望这会有所帮助:)

【讨论】：