0

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>
Hasan Toraman
  • 99
  • 1
  • 17
  • 1
    Does this answer your question? [Dynamic form using \*ngFor and submitting values from it](https://stackoverflow.com/questions/53708499/dynamic-form-using-ngfor-and-submitting-values-from-it) – Marshal Jan 27 '21 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 Jan 27 '21 at 21:41
  • 1
    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 Jan 27 '21 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 Jan 28 '21 at 08:17
  • 1
    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 Jan 28 '21 at 15:03

1 Answers1

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.

James
  • 86
  • 1
  • 7