如何动态地将表单输入添加到响应式表单中

Question

我遵循了这个教程:https://fireship.io/lessons/basics-reactive-forms-in-angular/为了了解更多关于响应式表单的知识。我已经生成了一个嵌套的形式，就像在视频中，并试图使一个格式生成的按钮点击。但是当我点击按钮的时候什么也没发生也没有错误但是我的输入没有出现，我反复检查了几次但是视频和我得到的是一样的有人能从这里看看并告诉我我的错误在哪里吗?

在typescript中生成表单的代码:

ngOnInit() {
this.materialAddForm = this.fb.group({
article_seller_id: '',
informationNote: '',
buildMaterial_sellers: this.fb.array([
]),
materialCode: '',
materialName: '',
materialType: '',
material_image_url: '',
material_prices: '',
quantity: '',
}
)
}
get sellerForm(){
return this.materialAddForm.get('buildMaterial_sellers') as FormArray
}
addSellerForm(){
const sellerForm = this.fb.group({
name: []
})
this.sellerForm.push(sellerForm)
}

Html只是动态表单部分:

<div class="-pull-right">
<button type="button" (click)="addSellerForm()" class="btn btn-primary mb-2">Add Seller</button>
</div>
<div formArrayName="buildMaterial_sellers">
<div *ngFor="let seller of sellerForm.controls let i=index" [formGroupName]="i">

<div class="input-group input-group-sm col-12 col-md-6 mb-4">
<div class="input-group-prepend">
<span class="input-group-text" id="name">Seller Name</span>
</div>
<input type="text" class="form-control" aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-sm"
formControlName="name" >
</div>

</div>
</div>

Answer 1

您正在将一个空表单组推入表单数组。因此，当模板按名称查找控件时，它可以在组中找到属性，但在该属性下没有可供其访问的控件。你可能想推这个:{name: this.fb.control()}。确保只推送数组中需要的实际ReactiveForm类型。目前，您的模式将向表单数组中添加表单组，而不是表单控件。这是一个有效的模式，但它可能不是你想要的。