Angular 9 Reactive Form, Nested FormArray

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

供应商卡组件.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">