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>

Does this answer your question? Dynamic form using *ngFor and submitting values from it — Marshal
– Marshal, Commented Jan 27, 2021 at 21:37
Sorry but I did not quite understand the solution there, it seems to be done more complicated then the solution in the video — Hasan Toraman
– Hasan Toraman, Commented Jan 27, 2021 at 21:41
If your goal is to learn more about dynamic reactive forms... replicating that solution, and understanding it, will give you all the information you will need to work with dynamic reactive forms. — Marshal
– Marshal, Commented Jan 27, 2021 at 21:44
I see that the answer is yours there haha could you maybe explain to me how it works with the buildForm method? It is a bit different from what I want you have a fix data variable, which is 3. What I want is to generate it with button click, would that mean I tried changing it to a number but it did not work or do I have to ignore data but then which array would I walk through? — Hasan Toraman
– Hasan Toraman, Commented Jan 28, 2021 at 8:17
You are correct, that is the correct method you want to review. The only difference is, that method is looping over an array of objects to construct the push... the syntax inside the push is what you need in your button function. — Marshal
– Marshal, Commented Jan 28, 2021 at 15:03

James · Accepted Answer · 2021-01-28 13:54:13Z

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.

answered Jan 28, 2021 at 13:54

James

961 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to dynamically add form input to reactive form angular

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related