Angular 9 Reactive Form, Nested FormArray

Question

I'm attempting to create a nested FormArray inside my reactive form, and when I use my button to add a new field it works, but, I keep getting the console error: Error: Cannot find control with path: 'vendorContacts -> 0 -> ' , and it won't send the data to my JSON. Sometimes without any changes, my angular won't even serve, presenting me with the errors Property 'x' does not exist on type 'VendorCardComponent'. for each input field I'm attempting to display in the html file.

I've attempted to follow a few different guides showing how to make this kind of thing, and always end up with the same errors. Could anyone push me in the right direction? Thanks.

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

you pass undefined to all of your inputs' formControlName directive, but here you should provide name of the input. just removing square brackets from the inputs should help. it will look like this:

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