Некоторые проблемы с угловой формой формы, такие как неправильное поведение полей ввода, угловой материал не работает - PullRequest
Новая
       32

Некоторые проблемы с угловой формой формы, такие как неправильное поведение полей ввода, угловой материал не работает

0 голосов
/ 15 октября 2019

Я использую угловой формат для хранения динамических данных в базе данных. Но есть несколько проблем с этим, таких как поля ввода принимают только одну цифру за раз, и угловые компоненты материала не работают на этой странице. Этот же код работает на других страницах. Если я удаляю formcontrolname из полей ввода, они работают нормально. Есть идеи, почему это происходит? Заранее спасибо

Вот мой код 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>
...