带有formarray的Angular 9动态控件无法正常工作

Question

我正在使用表单数组来动态添加或删除多个字段。而且效果很好。

但是我遇到了一个奇怪的问题。这些动态表单控件一次只接收单个数字或字符。

例如：对于数量表单控制 - 如果我输入 8 则它会自动转到下一个表单控件，所以我再次单击数量控制并输入另一个数字。

简而言之，它一次取单个数字或字符数字，而不是像“1234”或字符串那样的 3-4 位数字。

我不明白为什么会这样？

提前谢谢你

.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

使用控件而不是循环购买表单数组值。

试试这个：

component.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>

Example