How to add dynamically input fields in angular

Question

I have a angular reactive form, where I want to add to fields on button click. So far I can add the fields on button click and it works. But there are two problems I do not really understand and do not have a idea.

Problem is, I only can write one letter and then it does not continue
Problem is After I close the modal where my form is I want the complete form to reset. I did it on save and for the entered values it works. But not for the added input fields. They always stay.

Could someone look at it and give me a pointer maybe?

this is my ts file where I intialize my form:

    ngOnInit() {
    this.materialAddForm = this.fb.group({
        name: new FormControl(''),
        materialCode: new FormControl(''),
        materialType: new FormControl(''),
        quantity: new FormControl(''),
        buyInformation: this.fb.array([])
    })
  }


  saveMaterial() {
      this.materialService.addMaterial(this.materialModel).subscribe(console.log) ;
      this.materialAddForm.reset()

      console.log(this.materialModel)

  }

  addSellerInput() {
    const buyInformation = this.materialAddForm.controls.buyInformation as FormArray;
    buyInformation.push(this.fb.group({
      seller: new FormControl(''),
      price: new FormControl(''),
    }));
  }

This is my html (only the relevant part):

<div  class="form-row mb-4" formArrayName="buyInformation"
                       *ngFor="let buyInformation of materialAddForm.controls['buyInformation']?.value; let i = index">


              <div class="input-group input-group-sm col-12 col-md-6 mb-4" [formGroupName]="i">
                  <div class="input-group-prepend">
                    <span class="input-group-text" id="sellerName">Seller Name</span>
                  </div>
                  <input type="text" class="form-control" aria-label="Sizing example input"
                         aria-describedby="inputGroup-sizing-sm"
                         formControlName="seller"
                         >
                </div>

                <div class="input-group input-group-sm col-12 col-md-6 mb-4" [formGroupName]="i">
                  <div class="input-group-prepend">
                    <span class="input-group-text" id="materialUnitPrice">Price</span>
                  </div>
                  <input type="text" class="form-control" aria-label="Sizing example input"
                         aria-describedby="inputGroup-sizing-sm"
                         formControlName="price"
                         [(ngModel)]="materialModel.price" name="price">
                </div>
              </div>
            </div>

Why you are using [(ngModel)]="materialModel.price" in reactive form? You can remove it and try. — Krishna Mohan
– Krishna Mohan, Commented Jan 2, 2021 at 2:52
The reason I am using ngModel is I want to connect the value of my Inputs with my model and send it back to my backend I did not know how to do it otherwise. Do you have a better solution for me? — Hasan Toraman
– Hasan Toraman, Commented Jan 2, 2021 at 18:09
I just removed ngModel everywhere but still am getting the same mistake — Hasan Toraman
– Hasan Toraman, Commented Jan 2, 2021 at 18:43

Titus Sutio Fanpula · Accepted Answer · 2021-01-02 03:52:20Z

2

I don't know, why you're use [(ngModel)] with with FormGroup in the same time.

Updated: The only one reason why you can't reset your form, it's because you're using [(ngModel)]. "Just guessing".

And you only reset your reactive form ("materialAddForm") and not template driven form ("ngModel").

That's why your value always still there.

You can check an example here: https://stackblitz.com/edit/angular-ivy-mzdm3r?file=src/app/app.component.ts

edited Jan 2, 2021 at 3:52

answered Jan 2, 2021 at 3:41

Titus Sutio Fanpula

3,6234 gold badges18 silver badges36 bronze badges

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

3 Comments

Grant mitchell Over a year ago

yes i made this mistake not with ngmodel but if you mix template driven forms in reactive it gets way too messy you need to know the difference very important. if your making a dynamic form fo example have a formgroup=mainform inside that a formArray of formgorups or controls. each time you click a button push control to formarray.

Hasan Toraman Over a year ago

The reason I am using ngModel is I want to connect the value of my Inputs with my model and send it back to my backend I did not know how to do it otherwise. Do you have a better solution for me?

Hasan Toraman Over a year ago

I just removed ngModel everywhere but still am getting the same mistake

Collectives™ on Stack Overflow

How to add dynamically input fields in angular

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related