Adding input fields to a table using Form Array and *ngFor - Angular 2/5

Question

I'm a beginner at Angular 5 trying to add input fields dynamically to a table with a form array. I've used *ngFor inside the tr tag and the sample code is as follows:

HTML File:

          <table class="table">
              <thead>
                  <tr>
                      <th>F1</th>
                      <th>F2</th>
                  </tr>
              </thead>
              <form novalidate role="form" [formGroup]="caseinfo">
              <div formArrayName="caseRows">
              <tbody>
                  <tr *ngFor="let caserow of caseinfo.controls.caseRows.controls; let i=index" [formGroupName]="i" >

                      <td>
                          <div class="form-group">
                              <input type="text" class="form-control" formControlName="caselpn">
                              </div>
                          </div>
                      </td>
                      <td>
                          <div class="form-group">
                              <input type="text" class="form-control" formControlName="casesku">
                          </div>
                      </td>
                  </tr>
              </tbody>
            </div>
            </form>

          </table>

TS File:

  initFormCase()
  {
    this.caseinfo = this.fb.group({
    caseRows: this.fb.array([this.initCaseRows()]) // here
    });
  }

  initCaseRows() {
    return this.fb.group({
    caselpn:[null, Validators.compose([
      Validators.required,
    ])],
    casesku:[null, Validators.compose([
      Validators.required,
    ])]
    });
    }

This is what my output looks like: https://i.sstatic.net/rd5A1.png

Expected output: Input field 1 under F1 column. and Input field 2 under F2 column.

Note: I tried replacing the ngFor inside the tbody too. No luck. Thanks in advance! Sorry, can't post images as I have low rep points.

ElasticCode · Accepted Answer · 2018-06-20 04:39:00Z

3

Your HTML structure is wrong, try to update it as below and check

<form novalidate role="form" [formGroup]="caseinfo">
    <div formArrayName="caseRows">
        <table class="table">
            <thead>
                <tr>
                    <th>F1</th>
                    <th>F2</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let caserow of caseinfo.controls.caseRows.controls; let i=index" [formGroupName]="i">
                    <td>
                        <div class="form-group">
                            <input type="text" class="form-control" formControlName="caselpn">
                        </div>
                    </td>
                    <td>
                        <div class="form-group">
                            <input type="text" class="form-control" formControlName="casesku">
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</form>

answered Jun 20, 2018 at 4:39

ElasticCode

7,9252 gold badges38 silver badges49 bronze badges

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

1 Comment

Zion Over a year ago

I guess the structure was my problem. It started working fine after I made the modifications you suggested. Thanks a ton!

Collectives™ on Stack Overflow

Adding input fields to a table using Form Array and *ngFor - Angular 2/5

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related