时间戳

首页 > 解决方案 > Angular 9 反应式表单，嵌套 FormArray

angular - Angular 9 反应式表单，嵌套 FormArray

问题描述

我正在尝试在我的反应式表单中创建一个嵌套的 FormArray，当我使用我的按钮添加一个新字段时它可以工作，但是，我不断收到控制台错误：Error: Cannot find control with path: 'vendorContacts -> 0 -> '，它不会将数据发送到我的 JSON。有时，如果没有任何更改，我的 Angular 甚至都无法使用，向我Property 'x' does not exist on type 'VendorCardComponent'.显示我试图在 html 文件中显示的每个输入字段的错误。

我尝试遵循一些不同的指南来展示如何制作这种东西，但总是以同样的错误告终。谁能把我推向正确的方向？谢谢。

供应商卡.component.ts

vendorCardForm = this.fb.group({
    vendorInfo: this.fb.group({
      vendorName: [''],
      vendorAddress1: [''],
      vendorAddress2: [''],
      vendorCity: [''],
      vendorState: [''],
      vendorZip: [''],
      vendorCountry: ['']
    }),
    vendorContacts: this.fb.array([])
  });

  vendorContacts(): FormArray {
    return this.vendorCardForm.get("vendorContacts") as FormArray;
  }

  newVendorContacts(): FormGroup {
    return this.fb.group({
      contactType: [''],
      contactName: [''],
      contactAddress1: [''],
      contactAddress2: [''],
      contactCity: [''],
      contactState: [''],
      contactZipCode: [''],
      contactCountry: [''],
      contactOPhone: [''],
      contactCPhone: [''],
      contactEmail: ['']
    })
  }

  addVendorContacts() {
    this.vendorContacts().push(this.newVendorContacts());
  }

供应商-card.component.html

      <div formArrayName="vendorContacts">
      <h4>Contact Information
      <button type="button" class="btn btn-secondary btn-sm" (click)="addVendorContacts()">+</button></h4>
      <div class="row">
      <div class="col-lg-6" *ngFor="let vendorContact of vendorContacts().controls; let i=index">
        <div class="contact" [formGroupName]="i">
          {{i}}
          <input type="text" [formControlName]="contactType" class="form-control form-control-sm" placeholder="Contact Type">
          <input type="text" [formControlName]="contactName" class="form-control form-control-sm" placeholder="Contact Name">
          <input type="text" [formControlName]="contactAddress1" class="form-control form-control-sm" placeholder="Address">
          <input type="text" [formControlName]="contactAddress2" class="form-control form-control-sm" placeholder="Address">
          <input type="text" [formControlName]="contactCity" class="form-control form-control-sm" placeholder="City">
          <input type="text" [formControlName]="contactState" class="form-control form-control-sm" placeholder="State">
          <input type="text" [formControlName]="contactZipCode" class="form-control form-control-sm" placeholder="Zip">
          <input type="text" [formControlName]="contactCountry" class="form-control form-control-sm" placeholder="Country">
          <input type="text" [formControlName]="contactOPhone" class="form-control form-control-sm" placeholder="Office Phone #">
          <input type="text" [formControlName]="contactCPhone" class="form-control form-control-sm" placeholder="Cell Phone #">
          <input type="text" [formControlName]="contactEmail" class="form-control form-control-sm" placeholder="E-mail">
        </div>
      </div>
      </div>
    </div>

标签： angular

解决方案

您将 undefined 传递给所有输入的 formControlName 指令，但在这里您应该提供输入的名称。只是从输入中删除方括号应该会有所帮助。它看起来像这样：

<input type="text" formControlName="contactType" class="form-control form-control-sm" placeholder="Contact Type">

推荐阅读