Как привязать угловой FormArray к ngx-select-dropdown - PullRequest
Новая
       35

Как привязать угловой FormArray к ngx-select-dropdown

0 голосов
/ 17 июня 2019

Я пишу одностраничное веб-приложение angular7, используя ReactiveForms .Мне нужно перечислить коллекцию клиентов в раскрывающемся списке с возможностью поиска, и для этого я пытаюсь использовать 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;
  }
}

MyКласс компонента выглядит следующим образом 

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>

Мне нужен раскрывающийся список клиентов со следующими параметрами.

  1. раскрывающийся списокдолжен быть доступен для поиска.
  2. должен быть выбран один раз.
  3. , когда элемент выбран, элемент управления формы selectedCustomer должен быть обновлен (см. пример «Single Select Dropdown» в этой демонстрации:https://manishjanky.github.io/ngx-select-dropdown/)

Я добавил пример проекта в stackblitz

...