Dynamically Add Rows Based on Condition Using Reactive Forms in Angular

Question

Is it possible that i will be able to add rows based on certain condition in Angular reactive forms? If yes, please help me do it. I've already started it in my stackblitz. Please check this link https://stackblitz.com/edit/dynamically-add-rows

this.addForm.get("items").valueChanges.subscribe(val => {
      console.log(val);
      if (val === true) {
        this.addForm.get("items_value").setValue("yes");

        // How to add row here?
        this.addForm.addControl(rows, 'rows')
      }
      if (val === false) {
        this.addForm.get("items_value").setValue("no");

        // How to remove row here?
        this.addForm.removeControl(rows, 'rows')
      }
    });

i have a question . u want to add or remove many rows ? or just and or remove one row? — SoroushNeshat
– SoroushNeshat, Commented Sep 9, 2018 at 6:41
@Soroush_Neshat. At first, when the condition is met. It should only show one row. But i can also add another row because i will add a button to it. — Joseph
– Joseph, Commented Sep 9, 2018 at 6:46
i am not sure if i got your problem correctly . i will add an initial answer to your question and see if it solves your issue — SoroushNeshat
– SoroushNeshat, Commented Sep 9, 2018 at 6:55

SoroushNeshat · Accepted Answer · 2018-09-09 07:52:39Z

1

here is the edited stackblitz :https://stackblitz.com/edit/dynamically-add-rows-gk4veg?file=app%2Fapp.component.html

edited Sep 9, 2018 at 7:52

answered Sep 9, 2018 at 6:59

SoroushNeshat

6745 silver badges11 bronze badges

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

18 Comments

Joseph Over a year ago

I'm sorry i just need many rows. Is it possible to something like this? this.addForm.addControl('rows',new fb:array[]())?

SoroushNeshat Over a year ago

@Joseph ok . give me a second to update the question

SoroushNeshat Over a year ago

@Joseph see the link i added

Joseph Over a year ago

Can you put in my stackblitz since i want to have based it on the condition. If val is yes, then add that row, if val is no, then remove one row or several rows

SoroushNeshat Over a year ago

@Joseph if val is no , then how should i decide to remove one row , or many rows ?

|

Collectives™ on Stack Overflow

Dynamically Add Rows Based on Condition Using Reactive Forms in Angular

1 Answer 1

18 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

18 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related