0

我正在将我的对象响应数组加载到多选（ng-select）中。我的回复是这样的

formModel是这样的

clientForm = this.fb.group({
    custom : this.fb.array([this.fb.group({
      clientTaskId: [''], 
      taskName: [''],
      billableRate: [''],
      customRate: ['']
    })]),
  })

当我在多选中选择选项时，我无法获取 formArrayName 'custom' 中的值。但是当我使用“自定义”作为“formControlName”时，我能够获得我选择的对象。

这是我的代码：

import {Component, NgModule, ViewChild} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {FormControl, FormGroup, ReactiveFormsModule, FormsModule, FormBuilder,Validators, FormArray} from '@angular/forms';
import {NgSelectModule, NgOption} from '@ng-select/ng-select';

@Component({
    selector: 'my-app',
    template: `
    <form [formGroup]="clientForm" (ngSubmit)="submit(clientForm.value)">
      <ng-select 
        placeholder="Select custom rates"
        [items]="taskList"
        [multiple]="true"
        bindLabel="taskName"
        [addTag]="true"
        [closeOnSelect]="false"
        clearAllText="Clear"
        formArrayName = "custom"
        >
      </ng-select>

      <br>
      <pre>{{clientForm.value | json}}</pre>
      <br>
    <button type="submit">Submit</button>
    </form>
    <br>
    `
})
export class AppComponent {
  taskList =[
    { 'clientTaskId' : '1', 'taskName': 'hardware setup', billableRate: '500', customRate: ''},
    { 'clientTaskId' : '2', 'taskName': 'software installation', billableRate: '250', customRate: ''},
    { 'clientTaskId' : '3', 'taskName': 'environment setup', billableRate: '700', customRate: ''},
    { 'clientTaskId' : '4', 'taskName': 'cafeteria setup', billableRate: '1200', customRate: ''},
    ];

  ngOnInit() {
    this.taskList  
  }

  submit(formValue){
    console.log(formValue)
  }

  clientForm = this.fb.group({
    custom : this.fb.array([this.fb.group({
      clientTaskId: [''], 
      taskName: [''],
      billableRate: [''],
      customRate: ['']
    })]),
    customRate: ['']
  })
  constructor(private fb: FormBuilder ) {  }
}

这是演示：demo在这个演示中，我给出了带有 formControlName 而不是 formArray 名称的 ng-select 标记，以使您了解我的要求。

所以，我选择的任何对象都应该加载到 formArrayName 中。我尝试向 ng-select 添加（更改）功能，但它给出了不同的答案。

提前致谢。

4

1 回答 1

0

您是否尝试将 formArrayName 放在一个 div 中？

<div formArrayName="custom">
 <ng-select>...</ng-select>
</div>

如果我阅读正确，您的选择应该与数组中的特定 formControlName 相关联

于 2020-07-22T05:39:40.400 回答