如何访问 FormArray 中嵌套 FormGroup 的 formControlName

Question

我在这里管理表格和信息的方式可能完全错误。如果是这样，我很抱歉大家，但我有点迷路了...

这是我的表格：

private tpForm = this.fb.group({
    name: [null, Validators.required],
    vat: [null, Validators.required],
    activityNumber: [null],
    addresses: this.fb.array([
      this.createAddress()
    ])
  });

  constructor(private fb: FormBuilder) { }

  createAddress(): FormGroup {
    return this.fb.group({
      street: [null, Validators.required],
      streetComp: [null],
      streetComp2: [null],
      city: [null, Validators.required],
      cp: [null, Validators.required],
      state: [null],
      country: [null, Validators.required]
    });
  }

重要旁注：

表格是私有的
那里有一个构造函数

因为它来自于生成表格的服务，该表格适用于不同的模型。但是您了解了表单的整体结构。

我的 objective 是为了能够在必要时添加多个 address 并且每个 address 都是一个 FormGroup 对象，因为它是, 本身就是一种形式。

问题是，我似乎无法访问 FormGroup 中包含的控件，它们本身嵌套在 FormArray 中：

<mat-card-content>
      <mat-grid-list cols="3" rowHeight="1.2:1">
        <form [formGroup]="tpForm" (ngSubmit)="onSubmit()">
        <mat-grid-tile formGroupName="tpForm"> //<--- Here I'm trying to divide the access to the controls (name, vat, activityNumber) this one gives me an error (see below)
            <mat-form-field appearance="outline">
              <mat-label>Customer VAT Number</mat-label>
              <input matInput formControlName="vat">
              <mat-error *ngIf="tpForm.get('vat').invalid">Please enter a VAT number!</mat-error>
              <mat-icon matSuffix *ngIf="tpForm.get('vat').valid || !editing">sentiment_very_satisfied</mat-icon>
              <mat-hint>Customer's local VAT number</mat-hint>
            </mat-form-field>
            <button style="margin: 0.5rem;" mat-raised-button type="button" color="accent" (click)="onLoadInfo()" [disabled]="tpForm.get('vat').invalid || !editing">Load information</button>
            <mat-form-field appearance="fill">
              <mat-label>Customer name</mat-label>
              <input matInput formControlName="name">
              <mat-error *ngIf="tpForm.get('name').invalid">Please enter the customer's name</mat-error>
              <mat-icon matSuffix *ngIf="tpForm.get('name').valid || !editing">sentiment_very_satisfied</mat-icon>
              <mat-hint>Has to match the customer full legal name</mat-hint>
            </mat-form-field>
            <mat-form-field appearance="fill">
              <mat-label>Customer Activity Reference</mat-label>
              <input matInput formControlName="activityNumber">
              <mat-icon matSuffix *ngIf="tpForm.get('activityNumber').value">sentiment_very_satisfied</mat-icon>
              <mat-hint>Customer's local activity reference (INSEE, CNAE...)</mat-hint>
            </mat-form-field>
          </mat-grid-tile>
          <mat-grid-tile formGroupName="tpForm.get('addresses')[0]">//<--- So that I can get the controls from the addresses here 
            <mat-form-field appearance="fill">
              <mat-label>Street</mat-label>
              <input matInput formControlName="street">
              <mat-icon matSuffix *ngIf="tpForm.get('addresses')[0].get('street').value">sentiment_very_satisfied</mat-icon>
              <mat-hint>Customer's local activity reference (INSEE, CNAE...)</mat-hint>
           </mat-form-field>
         </mat-grid-tile>
       </form>
  </mat-grid-list>
</mat-card-content>

现在，我对此并不感到惊讶。所有这些都会产生以下错误：

ERROR Error: Cannot find control with name: 'tpForm'

指向我代码中的行（见评论）<mat-grid-tile formGroupName="tpForm">

我在翻译中有点迷茫，希望您能就如何处理这个问题发表意见。非常感谢！

Answer 1

<form [formGroup]="tpForm" (ngSubmit)="onSubmit()">
    <mat-grid-tile formGroupName="tpForm">

这是错误的，因为在名为 "tpForm" 的主表单组中没有任何名为 "tpForm" 的表单组。删除那个没用的 formGroupName="tpForm".

formGroupName="tpForm.get('addresses')[0]"

这也是错误的。 tpForm.get() returns 一个表单控件。您必须将表单组的 name 传递给 formGroupName.

您需要

<div formArrayName="addresses"> <!-- addresses is the name of the form array inside the owning form group tpForm -->
    <div [formGroupName]="0"> <!-- 0 is the index of form group inside the owning form array addresses -->
        <input formControlName="street"> <!-- street is the name of the form control inside the owning form group 0 -->

Answer 2

您正在尝试访问您的 FormGroup 中的 'tpForm' 成员。没有那个。

 this.fb.group({
**tpForm : this.fb.group({}),** //if you had this it would work.
name: [null, Validators.required],
vat: [null, Validators.required],
activityNumber: [null],
addresses: this.fb.array([
  this.createAddress()
])

});

你需要明白没有括号 formGroupName = "string" angular 认为输入是纯字符串。使用方括号 [formGroupName] = "objectFromComponent" angular 将考虑来自组件对象的输入。

对于 FormArray，我建议查看 angular 指南，他们很好地解释了您想要实现的目标。 https://angular.io/guide/reactive-forms#step-2-defining-a-formarray-control

如何访问 FormArray 中嵌套 FormGroup 的 formControlName

How to access the formControlName of a nested FormGroup inside a FormArray

form-control

angular

formarray

formgroups