How to dynamically add form input to reactive form angular

Question

I have followed this tutorial: https://fireship.io/lessons/basics-reactive-forms-in-angular/ In order to learn more about reactive forms. I have generated a nested form just like in the video and tried to make an formarray which is generated on button click. But nothing happenes when I click on my Button there are no errors too but my inputs do not come, I double checked several times but the video and what I have are identical could someone maybe from here look and tell me where my mistake is?

Code to generate form in 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 just the dynamic form part:

<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

You are pushing an empty form group into the form array. Thus, when the template is looking for the control by name, it can find the property in the group, but there is no control under that property for it to access. You may want to push this instead: {name: this.fb.control()}. Be sure to only push the actual ReactiveForm type that you want in the array. Currently, your pattern will add a form group to the form array, rather than a form control. That is a valid pattern AFAIK, but it may not be what you want.