时间戳

首页 > 解决方案 > 如何访问 FormArray 内嵌套 FormGroup 的 formControlName

angular - 如何访问 FormArray 内嵌套 FormGroup 的 formControlName

问题描述

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

这是我的表格：

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]
    });
  }

重要的旁注：

  1. 表格是私人的
  2. 那里有一个构造函数

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

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

我有点迷失在翻译中，希望您能就如何处理这个问题提供意见。提前谢谢了！

标签： angularform-controlformarrayformgroups

解决方案

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

这是错误的，因为在名为“tpForm”的主表单组中没有任何名为“tpForm”的表单组。去掉那个没用formGroupName="tpForm"的。

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

那也是错误的。tpForm.get() 返回一个表单控件。您必须将表单组的名称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 -->

推荐阅读