Several issues with angular formarray form such as

问题:

I am using an angular formarray to store dynamic data in the database. But there are several issues with it such as input fields are taking only one digit at a time and angular material components not working on that page. The same code is working on other pages. If I remove formcontrolname from input fields, they are working fine. Any idea why this is happening? Thanks in advance

Here is my code ts

 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')
   }

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



   addproduct() {

      this.product.push(this.addProductGroup())  
   }

   remove_product(index) {
     return this.product.removeAt(index)
   }

  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 : ['']
    })
  }

html

<form [formGroup]="purchaseform"> 

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

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