如何将表单输入动态添加到反应表单角度答案

【问题标题】：How to dynamically add form input to reactive form angular如何将表单输入动态添加到反应表单角度
【发布时间】：2021-05-01 18:20:30
【问题描述】：

我已按照本教程进行操作：https://fireship.io/lessons/basics-reactive-forms-in-angular/ 为了更多地了解反应形式。我已经生成了一个嵌套表单，就像在视频中一样，并尝试制作一个在按钮单击时生成的表单数组。但是当我点击我的按钮时什么也没有发生，也没有错误，但我的输入没有出现，我仔细检查了几次，但视频和我所拥有的是相同的，有人可以从这里看看并告诉我我的错误在哪里吗？

在打字稿中生成表单的代码：

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>

【问题讨论】：

这能回答你的问题吗？ Dynamic form using *ngFor and submitting values from it
对不起，我不太明白那里的解决方案，它似乎比视频中的解决方案更复杂
如果您的目标是了解有关动态反应式表单的更多信息...复制该解决方案并理解它，将为您提供使用动态反应式表单所需的所有信息。
我知道答案是你的，哈哈，你能向我解释一下它是如何与 buildForm 方法一起工作的吗？这与我希望您拥有一个固定数据变量（即 3）有点不同。我想要的是通过单击按钮生成它，这是否意味着我尝试将其更改为一个数字但它不起作用或者我有忽略数据，然后我会遍历哪个数组？
你是对的，这就是你要复习的正确方法。唯一的区别是，该方法循环遍历对象数组以构造 push...push 中的语法是您在按钮函数中所需要的。

标签： angular typescript web-applications angular-reactive-forms

【解决方案1】：

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

【讨论】：