![](/img/trans.png)
[英]Angular 9 Reactive Form; PatchValue of FormGroup with nested FormArray
[英]Angular 9 Reactive Form, Nested 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());
}
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>
您将 undefined 传递给所有输入的 formControlName 指令,但在这里您应该提供输入的名称。 只是从输入中删除方括号应该会有所帮助。 它看起来像这样:
<input type="text" formControlName="contactType" class="form-control form-control-sm" placeholder="Contact Type">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.