Question

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

我试图遵循一些不同的指南来展示如何制作这种东西，并且总是以相同的错误告终。有人可以向正确的方向推动我吗？谢谢。

vendor-card.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());
  }

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

Answer 1

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

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

Angular 9反应形式，嵌套FormArray

1 个答案: