angular - 如何处理以 Angular react 形式的对象数组形式出现的响应

Question

我正在获取一个对象数组作为响应，并将其分配给具有 formControlName“自定义”的多选(ng-select)。我得到的响应如下所示

this.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: ''},
    ];

这是我的表单组

 clientForm = this.fb.group([
 custom: ['']
 ])

现在无论我选择什么对象。我将其填充到一个表中，其中表的一列是可编辑的。现在，我在表的可编辑列中编辑数据，当我点击保存按钮时，我应该得到编辑数据的响应。

我已使用 formControl 名称填充数据。

这是我的代码:

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"
        formControlName = "custom"
        >
      </ng-select>

      <br>
      <table class="table">
        <thead class="thead-light">
          <tr>
          <th scope="col">Task Name</th>
            <th scope="col">Custom Rate</th>
            <th scope="col">Standard Rate</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let task of clientForm.controls['custom'].value">
            <td>{{ task.taskName }}</td>
            <td>
              <input class="form-control form-control-sm" type="text" placeholder="" >
            </td> 
            <td>{{ task.billableRate}}</td>
          </tr>
        </tbody>
      </table>
      <br>
    <button type="submit">Submit</button>
    </form>
    <br>
    `
})
export class AppComponent {
  taskList : any;

  ngOnInit() {
    this.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: ''},
    ];
  }

  submit(formValue){
    console.log(formValue)
  }
  clientForm = this.fb.group({
    custom : ['']
  })
  constructor(private fb: FormBuilder ) {  }

}

这是演示: demo

我是 Angular react 形式的初学者，我对如何使用 formArray 和 formGroup 有点困惑。以及如何处理对象数组的响应。

希望您理解我的问题，如果您需要任何澄清，请发表评论。

提前致谢。

Answer 1

尝试这样:

DEMO

访问表单数组元素:

{{clientForm.controls.customer.controls[i].controls.billableRate.value}}

代码 HTML 和 TS:

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

      <table class="table" formArrayName="customer">
        <thead class="thead-light">
          <tr>
          <th scope="col">Task Name</th>
            <th scope="col">Custom Rate</th>
            <th scope="col">Standard Rate</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let task of clientForm.controls['customer'].controls; let i= index" [formGroupName]="i" >
            <td>{{clientForm.controls.customer.controls[i].controls.taskName.value}}</td>
            <td>
              <input formControlName="customRate" class="form-control form-control-sm" type="text" placeholder="" >
            </td> 
            <td>{{clientForm.controls.customer.controls[i].controls.billableRate.value}}</td>
          </tr>
        </tbody>
      </table>
      <br>
    <button type="submit">Submit</button>
    </form>
    <br>

    <div>{{clientForm.value |json}}</div>
    `
})
export class AppComponent {
  customer: FormArray;
  clientForm: FormGroup;
  taskList: Array<any> = [
    { 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: '' },
  ];

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.createForm();

    this.customer = this.getData();

    while (this.getData().length) {
      this.customer.removeAt(0)
    }

    for (let d of this.taskList) {
      this.addMore(d);
    }
  }

  getData() {
    return this.clientForm.get('customer') as FormArray;
  }

  addMore(d) {
    this.getData().push(this.buildCusforms(d));
  }

  buildCusforms(data) {
    if (!data) {
      data = {
        clientTaskId: null,
        taskName: null,
        billableRate: null,
        customRate: null
      }
    }
    return this.fb.group({
      clientTaskId: data.clientTaskId,
      taskName: data.taskName,
      billableRate: data.billableRate,
      customRate: data.customRate
    });
  }


  createForm() {
    this.clientForm = this.fb.group({
      customer: this.fb.array([this.buildCusforms({
        clientTaskId: null,
        taskName: null,
        billableRate: null,
        customRate: null
      })])
    });
  }
}