Angular 9 Dynami c управления с Formarray не работает должным образом

Question

Я использую форматирование для динамического добавления или удаления нескольких полей. И это работает довольно хорошо.

Но у меня странная проблема. Эти динамические c элементы управления формой принимают только один ди git или символ за раз.

Например: для количественного элемента управления -if, если я набираю 8, он автоматически переходит к следующему элементу управления формы, поэтому Я снова нажал на контроль количества и набрал еще один di git.

Короче говоря, он принимает один или символ di git за раз, а не 3-4 цифры, как "1234" или строку.

Не могу понять, почему это происходит?

Заранее спасибо

.ts

    purchaseform = this.fb.group({

      vendor_mobile : ['', [Validators.required, Validators.minLength(10), Validators.maxLength(10)]],
      product : this.fb.array([this.addProductGroup()])

    })

    addProductGroup() {
      return this.fb.group({
        product_name : ['', Validators.required ],
        product_quantity : ['', Validators.required],
        product_Buyingprice : ['', Validators.required],
        totalprice : ['']
      })
    }

      get vendor_mobile() {
    return this.purchaseform.get('vendor_mobile')
   }


   get product() {
    return this.purchaseform.get('product') as FormArray;
  }


   get product_name() {
    return this.purchaseform.get('product_name')
   }

   get product_quantity() {
    return this.purchaseform.get('product_quantity')
   }    
   get product_Buyingprice() {
    return this.purchaseform.get('product_Buyingprice')
   }

. html

<form [formGroup]="purchaseform"> 

        <h2>Add product details</h2>

            <div formArrayName = "product"  *ngFor="let prod of purchaseform.controls.product?.value; let i = index">       
             <ng-container [formGroupName]="i">

            <h3>Select product</h3>

            <div class="form-group">


            <select class="browser-default custom-select" formControlName = "product_name"  >
                    <option value="" disabled >Select Product </option>
                    <option *ngFor="let prod of product_list" [ngValue]="prod.product_id" > {{prod.name}} </option>
           </select>
            </div> 
            <div class="form-group">

              <label>product quantity</label>
              <input formControlName="product_quantity" type="number" class="form-control" placeholder="Enter product quantity">

          </div>
          <div class="form-group">

            <label>product Price</label>
            <input formControlName="product_Buyingprice" type="number" class="form-control" placeholder="Enter product buying price">
        </div>

        <button type="button" [disabled]="!purchaseform.valid" class="btn btn-primary"  (click) = "addproduct()">Add product</button>  

        <button [disabled] = "i==0" type="button" class="btn btn-danger" (click) = "remove_product(i)">Delete product</button>

      </ng-container>
       </div>

      <button type="button" [disabled]="!purchaseform.valid || clicked " class="btn btn-primary" >Submit</button>
    </form>    

Answer 1

Вместо зацикливания значения массива buyform используйте элементы управления.

Попробуйте:

компонент. html

<div formArrayName="product" *ngFor="let prod of product?.controls; let i = index">
        <ng-container [formGroupName]="i">
            <h3>Select product</h3>
            <div class="form-group">
                <select class="browser-default custom-select" formControlName = "product_name"  >
                    <option value="" disabled >Select Product </option>
                    <option *ngFor="let prod of product_list" [ngValue]="prod.product_id" > {{prod.name}} </option>
           </select>
            </div>
            <div class="form-group">
                <label>product quantity</label>
                <input formControlName="product_quantity" type="number" class="form-control" placeholder="Enter product quantity">

          </div>
                <div class="form-group">

                    <label>product Price</label>
                    <input formControlName="product_Buyingprice" type="number" class="form-control" placeholder="Enter product buying price">
        </div>
                    <button type="button" [disabled]="!purchaseform.valid" class="btn btn-primary"  (click) = "addproduct()">Add product</button> 
                    <button [disabled] = "i==0" type="button" class="btn btn-danger" (click) = "remove_product(i)">Delete product</button>
        </ng-container>
    </div>

Пример