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

Question

我已经学习了这个教程：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>

Answer 1

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

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

How to dynamically add form input to reactive form angular

web-applications

typescript

angular

angular-reactive-forms