标签: formarray

在运行时,我从JSON对象获取所有记录,并在表单控件中获取值.但是,在表单数组中,我只获得了许多记录中的第一个.

控制台中显示的错误:

在FormArray._throwIfControlMissing中找不到索引1处的表单控件

JSON对象和错误的图像:

1. 接口

export interface IService {
    ServiceID: number,
    Name: string,
    Staffs: IStaffView[]
}

export interface IStaffView {
    StaffServiceID: number,
    StaffID: number,
    Name: string
}

2. 零件

import { Component, OnInit, Input } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { Observable } from 'rxjs/Rx';
import { FormBuilder, FormGroup, FormControl, FormArray , Validators } from '@angular/forms';

import { RESTService } from '../../Service/REST.service';
import { IService, IStaffView } from '../../Model/service.model';
import { …

编辑

由于上面 Chellappan 的回答，问题的第一部分得到了解决，但我遇到了其他问题，这让我做了一个 stackblitz，可以在这里找到： https ://stackblitz.com/edit/angular-ivy-bzh3dh

问题是我无法正确检索从表单中选择的产品列表，因为它们全部输出：

  "courses": [
    {
      "courseName": "Dessert",
      "products": [
        {
          "product": true
        },
        {
          "product": false
        },
        {
          "product": null
        }
      ]

我不知道如何能够检索类似的内容：

  "courses": [
    {
      "courseName": "Dessert",
      "products": [
        {
          "Crumble aux pommes": true
        },
        {
          "Mousse au chocolat maison": false
        },
        {
          "Riz au lait": false
        }
      ]

第二个问题是我的复选框的标签不是独立的。如果我添加新的“课程”并选择一些产品，其他课程中所有复选框的标签也会更改。

我希望我的帖子不要太乱，我不会经常在 Stack Overflow 上编辑消息

编辑结束

我有一个带有嵌套表单数组的反应式表单来描述包含多个课程的菜单，每个课程包含多个产品，但我不知道如何使其工作。我的实际问题是我无法检索第二级控件。

这是菜单的 json 结构：

{
  "name": "",
  "description": "",
  "price": "",
  "courses": [
    {
      "courseName": "",
      "products": [ …

我在表单上使用ng-select，但现在我想将其特定配置包装在自定义组件上。问题是我正在使用FormArray包含其中几个的 a，以下面的方式：

this.profileForm = this.formBuilder.group(
  {
    ...
    linkedRoles: this.formBuilder.array([])
  }
);

这linkedRoles由下一个填充FormGroup：

let fgRoles: FormGroup;

for (let i = 0; i < this.userRoles.length; i++) {
  fgRoles = this.formBuilder.group({
    activeRole: [{ value: null }],
    roles: [{ value: null }]
  });
  this.linkedRoles.push(fgRoles);
  this.linkedRoles.controls[i].setValue({
    activeRole: this.userRoles[i].role,
    roles: this.extractUserRoles(this.userRoles[i])
  });

为了简单起见，还创建了 getter：

get linkedRoles(): FormArray {
  return <FormArray>this.profileForm.get("linkedRoles");
}

之后，在我的模板中，我使用了这个效果完美的组合：

<form [formGroup]="profileForm">
  ...

  <table>
    ...
    <tbody>
      <tr formArrayName="linkedRoles"
        *ngFor="let usuR of userRoles;
          let idx = index" …

注意到 angular5 表单的奇怪行为，使用构建器构建一个表单，其中包含捕获附加动态数据所需的表单数组，表单数组值仅在以下情况下更新：

1. 在创建过程中初始表单控件添加到表单数组this.formBuilder.array(this.getRow())
2. 当第一个初始控件被触摸时

Angular 版本 5.2.0 实验/示例代码在这里

第 1/2 点附录

更改似乎仅在未动态添加到 FormArray 的组件上注册

表单数组元素包含初始化过程的代码

  ngOnInit(){
    this.form = this.formBuilder.group({
      name:[null],
      description:[null],
      hobbies:this.formBuilder.array([this.getRow()])
    });
  }

  getRow():FormGroup{
    return this.formBuilder.group({
      hobby:[null],
      description:[null]
    });
  }

尽管很明显创建了额外的控件，但它们都是空的

然而，一旦触摸第一个元素（注意到从 Fishing 到 Fishing4 的变化，并且控制台输出现在具有剩余动态添加控件的值），所有新的动态字段值都会传播

我在Angular 5/Angular Material应用程序中有这个FormArray:

this.form = new FormGroup({    
    customerNumberContainers: new FormArray([
      new FormGroup({
        contactTenant: new FormControl('', [Validators.required, Validators.minLength(2)]),
        customerNumber: new FormControl('', [Validators.required, Validators.minLength(2)])
        }),
    ]),
...

实际上我不知道如何通过这个FormArray.我试过这个

<form [formGroup]="form" (ngSubmit)="onSubmit()">
    <div formGroupName="customerNumberContainers">          
        <div *ngFor="let customerNumberContainer of form.controls['customerNumberContainers']; index as i">
            <mat-input-container class="full-width-input" style="min-width:100px;">
                 <input matInput placeholder="Tenant" formControlName="customerNumberContainer[i].contactTenant">
            </mat-input-container> 
            <mat-input-container class="full-width-input" style="min-width:100px;">
                 <input matInput placeholder="Customernumber" formControlName="customerNumberContainer[i].customerNumber">
            </mat-input-container> 
        </div>
    </div>
   ...

我知道我们可以使用 FormArray 添加对象数组，FormGroup如下所示： https:
//alligator.io/angular/reactive-forms-formarray-dynamic-fields/

ngOnInit() {
  this.orderForm = this.formBuilder.group({
    customerName: '',
    email: '',
    items: this.formBuilder.array([ this.createItem() ])
  });
}

createItem(): FormGroup {
  return this.formBuilder.group({
    name: '',
    description: '',
    price: ''
  });
}

addItem(): void {
  this.items = this.orderForm.get('items') as FormArray;
  this.items.push(this.createItem());
}

<div formArrayName="items"
  *ngFor="let item of orderForm.get('items').controls; let i = index;">
  <div [formGroupName]="i">
    <input formControlName="name" placeholder="Item name">
    <input formControlName="description" placeholder="Item description">
    <input formControlName="price" placeholder="Item price">
  </div>

  Chosen name: {{ orderForm.controls.items.controls[i].controls.name.value }}
</div>

但我想要的是数字数组而不是对象。
我们如何在 Angular 6.* …

首先，感谢@ AJT_82提供的建议！

我一直在研究一个更简单的代码重现错误的示例，可以在stackblitz.com/edit/angular-42gobh中 找到该错误。注释了有问题的行，以便您可以检查出正确的结果。只需取消注释， <div [formGroup]="i"></div> 就可以使一切崩溃。

基本上，我有一个为组件构建表单的服务，并且HTML文件使用Angular Material。当手风琴用于formArray时，应用程序完全崩溃，并且无法正确分配formGroup：

customer-edit.service.ts：

import { Injectable } from '@angular/core';
import { FormGroup, FormBuilder, FormArray, Validators } from '@angular/forms';

@Injectable({
  providedIn: 'root'
})
export class CustomerEditService {
  private cusForm: FormGroup = this.fb.group({
    thirdParty: this.fb.group({
      name: this.fb.control(null),
      vat: this.fb.control(null),
      corpoPhone: this.fb.control(null),
      corpoMail: this.fb.control(null),
      corpoWeb: this.fb.control(null),
      activityNumber: this.fb.control(null),
      addresses: this.fb.array([]),
      contacts: this.fb.array([])
    }),
    docRefs: this.fb.group({}),
    commentsArr: this.fb.group({})
  });

  constructor(
    private fb: FormBuilder
    ) {    }

    // **** EMPTY FORMS GETTERS …

当我们尝试使用 formGroup 时，我们会遇到一些错误。我需要一些关于表单组的解释。我想创建一个包含数据的表单组。数据需要逐行显示。 当我运行它时，我们使用 Angular 8 ，我收到此错误：

路径没有表单控件的值访问器：'rowDetails -> 0 -> no'

我有这个组件的构造函数：

 constructor(
    public fb: FormBuilder
    ) { 
      this.summaryForm = this.fb.group({
        rowDetails: this.fb.array([])
      })
    }

我有这个组件控制器：

ngOnInit() {
    this.productList = (this.selectedReceiptBatch.incomeSummary as SaleSummary).sales;
    this.summaryForm = this.fb.group({
      rowDetails: this.fb.array(
        this.productList.map(x=> this.fb.group({
              'no': x.product.code,
              'desc': x.product.productClass,
              'numberx': [x.number.x],
              'numbery': x.number.y,
              'amountz': x.number.z,
              'reference': [x.reference]
        })
      )) 
    });
    console.log(this.summaryForm);
    this.formControlAvailable = true;
  }

HTML：

<div *ngIf="formControlAvailable">

  <div>

    <div [formGroup]="summaryForm">
      <div formArrayName="rowDetails">
        <div *ngFor="let row of summaryForm.controls.rowDetails.controls; let index = index">
          <div [formGroupName]="index"> …

我正在使用 FormArray 来使用嵌套 FormControl。我的表格是这样的：

let form = new FormGroup({
   name: new FormControl(),
   email: new FormControl(),
   Addresses : new FormArray([
      new FormGroup({
         building: new FormControl(),
         society : new FormControl(),
      }),
      new FormGroup({
         building: new FormControl(),
         society : new FormControl(),
      })
      new FormGroup({
         building: new FormControl(),
         society : new FormControl(),
      })
   ])
})



addNewAddress() {
   let newAddress = new FormGroup({
      building: new FormControl(),
      society : new FormControl(),
   });
   this.form.get("addresses").push(newAddress)
}

并在 HTML 模板中

<div *ngFor="let controlGroup of form.get('addresses').controls; let i=index">
   <ng-container [formGroup]="controlGroup"> …

我在 FormArray 方面遇到问题，可能需要一些帮助。\n我有一个带有变量 FormArray 的表单，它可以工作，我可以将数据发送到后端。\n问题是，我无法设置从我收到的数据中的值后端。

这是打字稿代码：

this.form = this.fb.group({\n  title: new FormControl("",[Validators.required]),\n  actors: new FormArray([])\n})\n\nthis.moviesService.getMovie(this.movieId).subscribe(movieData => {\n  this.movie = movieData;\n  this.form.patchValue({\n    title: this.movie.title,\n    actors: this.movie.actors,           \n  })\n})\n

然后在 html 中单击按钮，我调用此函数：

addActor(){\n  const actorsForm = this.fb.group({\n    actor: \'\',\n    role: \'\'\n  })\n  this.actors.push(actorsForm);\n}\n\nremoveActor(i: number){\n  this.actors.removeAt(i);\n}\n

和 HTML：

<form [formGroup]="form" (submit)="onSubmit()">\n  <table  formArrayName="actors">\n    <tr>\n      <th colspan="2">Besetzung:</th>\n      <th width="150px">\n        <button type="button" mat-stroked-button color="primary" (click)="addActor()">Hinzuf\xc3\xbcgen +</button>\n      </th>\n    </tr>\n    <tr *ngFor="let actor of form.get(\'actors\')[\'controls\']; let i=index" [formGroupName]="i">\n      <td>\n …