Add a row dynamically : Angular Reactive-Form

Question

I want to add row dynamically when I click the button. I'm using reactive-form for this.

here is my html code

<table>
    <thead>
        <tr class='tableHeader'>
            <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
                <td fxFlex="22" class="pr-4">Name</td>
                <td fxFlex="15" class="pr-4">Price</td>
                <td fxFlex="15" class="pr-4">Loan Term</td>
                <td fxFlex="15" class="pr-4">Quantity</td>
                <td fxFlex="15" class="pr-4">Deposit</td>
                <td fxFlex="15" class="pr-4">Total</td>
            </div>
        </tr>
    </thead>
    <tbody>
        <tr [formGroup]="loanProductForm">
            <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
                <td fxFlex="22">
                    <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                        <mat-label>Product </mat-label>
                        <mat-select formControlName="productId" required>
                            <mat-option *ngFor="let product of productList" [value]="product.productId">
                                {{product.name}}
                            </mat-option>
                        </mat-select>
                    </mat-form-field>
                </td>
                <td fxFlex="15">
                    <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                        <mat-label>Price </mat-label>
                        <input type='number' matInput formControlName="price" name="" id="" placeholder="Price" required>
                    </mat-form-field>
                </td>
                <td fxFlex="15">
                    <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                        <mat-label>Loan Term </mat-label>
                        <mat-select formControlName="loanTermId" required>
                            <mat-option *ngFor="let loanTerm of loanTermList" [value]="loanTerm.loanTermId">
                                {{loanTerm.numberOfMonths}}
                            </mat-option>
                        </mat-select>
                    </mat-form-field>
                </td>
                <td fxFlex="15">
                    <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                        <mat-label>Quantity </mat-label>
                        <input type='number' formControlName="quantity" matInput name="" id="" placeholder="Quantity" required>
                    </mat-form-field>
                </td>
                <td fxFlex="15">
                    <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                        <mat-label>Deposit </mat-label>
                        <input type='number' formControlName="deposit" matInput name="" id="" placeholder="Deposit" required>
                    </mat-form-field>
                </td>
                <td fxFlex="15">
                    <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                        <mat-label>Total </mat-label>
                        <input type='number' formControlName="total" matInput name="" id="" placeholder="Total" required>
                    </mat-form-field>
                </td>

            </div>
        </tr>
        <tr>
            <td fxFlex="10">
                <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
                    <button mat-stroked-button class='addBtn btn-style-2' fxFlex='100' (click)='addTableRow()'>Add
                        <mat-icon matSuffix>add_box</mat-icon>
                    </button>
                </div>
            </td>
        </tr>
    </tbody>
</table>

and here is how I'm trying in my ts file

   this.loanProductForm = this._formBuilder.group({
      productId: ['', Validators.required],
      price: ['', Validators.required],
      loanTermId: ['', Validators.required],
      quantity: ['', Validators.required],
      deposit: ['', Validators.required],
      total: ['', Validators.required],
    })


addTableRow() {
    this.newRow = { productId: '', price: '', loanTermId: '', quantity: '', deposit: '', total: '' };
    // this.tableRows.push(this.newRow)
  }

but the code won't let me use push method on this form

I guess you mean reactive-form ?

Dipak Telangre
– Dipak Telangre

2019-11-20 11:21:32 +00:00
Commented Nov 20, 2019 at 11:21 — Dipak Telangre
– Dipak Telangre, Commented Nov 20, 2019 at 11:21
yes exactly, sorry I typo, I'm just correcting it

Lint
– Lint

2019-11-20 11:22:02 +00:00
Commented Nov 20, 2019 at 11:22 — Lint
– Lint, Commented Nov 20, 2019 at 11:22
Add another line of form or add the form value as a line?

GaryB
– GaryB

2019-11-20 11:25:29 +00:00
Commented Nov 20, 2019 at 11:25 — GaryB
– GaryB, Commented Nov 20, 2019 at 11:25
I mean the add button will insert a new row below

Lint
– Lint

2019-11-20 11:26:52 +00:00
Commented Nov 20, 2019 at 11:26 — Lint
– Lint, Commented Nov 20, 2019 at 11:26
new row of values or a new row of inputs?

GaryB
– GaryB

2019-11-20 11:27:16 +00:00
Commented Nov 20, 2019 at 11:27 — GaryB
– GaryB, Commented Nov 20, 2019 at 11:27

Adrita Sharma · Accepted Answer · 2019-11-20 11:52:48Z

6

You need to use Form Array in this case.

Try like this:

Working Demo

.ts

this.loanProductForm = this.fb.group({
  products: this.fb.array([
    this.addProductFormGroup()
  ])
});

 addProductFormGroup(): FormGroup {
    return this.fb.group({
      productId: ['', Validators.required],
      price: ['', Validators.required],
      loanTermId: ['', Validators.required],
      quantity: ['', Validators.required],
      deposit: ['', Validators.required],
      total: ['', Validators.required],
    });
  }

addProductButtonClick(): void {
   (<FormArray>this.loanProductForm.get('products')).push(this.addProductFormGroup());
}

.html

 <button type="button" (click)="addProductButtonClick()">
          Add Product
 </button>

edited Nov 20, 2019 at 11:52

answered Nov 20, 2019 at 11:25

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

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

17 Comments

Lint Over a year ago

I'm getting error on your second code snippet. Cannot find name addProductFormGroup where should I write this code. I wrote it just just under the the formBuilder group as in your

Adrita Sharma Over a year ago

It is a separate function

Lint Over a year ago

Sorry, my code complied and executed successfully but its not working, i.e. not adding row on click event. Nor do it is producing any error on console

Adrita Sharma Over a year ago

Check the demo I shared

Lint Over a year ago

its working now, but there's a little trouble and that as as I click the add button, the new row instantly becomes red (like that in case of form invalid) to avoid that problem

|

irudji · Accepted Answer · 2019-11-20 11:28:18Z

3

I think this should help you:

https://alligator.io/angular/reactive-forms-formarray-dynamic-fields/

edited Nov 20, 2019 at 11:28

answered Nov 20, 2019 at 11:27

irudji

2391 gold badge3 silver badges13 bronze badges

2 Comments

Lint Over a year ago

this link is broken

irudji Over a year ago

Sorry. Repaired

Bilel-Zheni · Accepted Answer · 2019-11-20 11:32:30Z

You need to use form array instead of form group :

ts

  ...

       this.loanProductForm = this._formBuilder.group(
           loanProductArray : this._formBuilder.array([this.buildGroup()])
    ) ;


    get loanProductArray(){
      return this.loanProductForm.get('loanProductArray ') as FormArray ;
    }

    buildGroup(){
    return    this.loanProductForm = this._formBuilder.group({
          productId: ['', Validators.required],
          price: ['', Validators.required],
          loanTermId: ['', Validators.required],
          quantity: ['', Validators.required],
          deposit: ['', Validators.required],
          total: ['', Validators.required],
        })
    }

addTableRow() {
   this.loanProductArray.push(this.buildGroup()) ;
  }

html

    ...

 <tbody [formGroup]="loanProductForm">
   <ng-container formArrayName="loanProductArray">
        <tr *ngFor="let line of loanProductArray.controls; let i=index" [formGroupName]="i">
            <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
                <td fxFlex="22">
                    <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                        <mat-label>Product </mat-label>
                        <mat-select formControlName="productId" required>
                            <mat-option *ngFor="let product of productList" [value]="product.productId">
                                {{product.name}}
                            </mat-option>
                        </mat-select>
                    </mat-form-field>
                </td>
                <td fxFlex="15">
                    <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                        <mat-label>Price </mat-label>
                        <input type='number' matInput formControlName="price" name="" id="" placeholder="Price" required>
                    </mat-form-field>
                </td>
                <td fxFlex="15">
                    <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                        <mat-label>Loan Term </mat-label>
                        <mat-select formControlName="loanTermId" required>
                            <mat-option *ngFor="let loanTerm of loanTermList" [value]="loanTerm.loanTermId">
                                {{loanTerm.numberOfMonths}}
                            </mat-option>
                        </mat-select>
                    </mat-form-field>
                </td>
                <td fxFlex="15">
                    <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                        <mat-label>Quantity </mat-label>
                        <input type='number' formControlName="quantity" matInput name="" id="" placeholder="Quantity" required>
                    </mat-form-field>
                </td>
                <td fxFlex="15">
                    <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                        <mat-label>Deposit </mat-label>
                        <input type='number' formControlName="deposit" matInput name="" id="" placeholder="Deposit" required>
                    </mat-form-field>
                </td>
                <td fxFlex="15">
                    <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                        <mat-label>Total </mat-label>
                        <input type='number' formControlName="total" matInput name="" id="" placeholder="Total" required>
                    </mat-form-field>
                </td>

            </div>
        </tr>
        <tr>
            <td fxFlex="10">
                <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
                    <button mat-stroked-button class='addBtn btn-style-2' fxFlex='100' (click)='addTableRow()'>Add
                        <mat-icon matSuffix>add_box</mat-icon>
                    </button>
                </div>
            </td>
        </tr>
</<ng-container>
    </tbody>

Collectives™ on Stack Overflow

Add a row dynamically : Angular Reactive-Form

3 Answers 3

17 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

17 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related