title: How to add dynamically input fields in angular
body: <p>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.</p>
  <ol>
  <li>Problem is, I only can write one letter and then it does not continue</li>
  <li>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.</li>
  </ol>
  <p>Could someone look at it and give me a pointer maybe?</p>
  <p>this is my ts file where I intialize my form:</p>
  <pre><code>    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(''),
      }));
    }
  </code></pre>
  <p>This is my html (only the relevant part):</p>
  <pre><code>&lt;div  class=&quot;form-row mb-4&quot; formArrayName=&quot;buyInformation&quot;
                         *ngFor=&quot;let buyInformation of materialAddForm.controls['buyInformation']?.value; let i = index&quot;&gt;
  
  
                &lt;div class=&quot;input-group input-group-sm col-12 col-md-6 mb-4&quot; [formGroupName]=&quot;i&quot;&gt;
                    &lt;div class=&quot;input-group-prepend&quot;&gt;
                      &lt;span class=&quot;input-group-text&quot; id=&quot;sellerName&quot;&gt;Seller Name&lt;/span&gt;
                    &lt;/div&gt;
                    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; aria-label=&quot;Sizing example input&quot;
                           aria-describedby=&quot;inputGroup-sizing-sm&quot;
                           formControlName=&quot;seller&quot;
                           &gt;
                  &lt;/div&gt;
  
                  &lt;div class=&quot;input-group input-group-sm col-12 col-md-6 mb-4&quot; [formGroupName]=&quot;i&quot;&gt;
                    &lt;div class=&quot;input-group-prepend&quot;&gt;
                      &lt;span class=&quot;input-group-text&quot; id=&quot;materialUnitPrice&quot;&gt;Price&lt;/span&gt;
                    &lt;/div&gt;
                    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; aria-label=&quot;Sizing example input&quot;
                           aria-describedby=&quot;inputGroup-sizing-sm&quot;
                           formControlName=&quot;price&quot;
                           [(ngModel)]=&quot;materialModel.price&quot; name=&quot;price&quot;&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>