没有得到Angular中反应形式的所有值

时间:2018-05-09 11:11:58

标签: angular angular-reactive-forms reactive-forms

我正在使用反应形式并使用它提交给服务器。问题是我得到的一些表单字段值,但有些是空白。在下面的代码中,我得到除税组下的值以外的所有值。 taxesList是一个动态加载的对象数组。如果您有任何解决方案,请帮助我

ngOnInit() {

   this.newproductfrm = this.fb.group({
        prdbarcode: ['', [Validators.required]],
        prdhsncode: ['', [Validators.required]],   
        prdname: ['', Validators.compose([Validators.required, Validators.minLength(2)])],
        category: [''],  
        subcategory: [''], 
        supplier: [''],
        pricing: this.fb.group({
            costprice: ['', Validators.compose([Validators.required,Validators.pattern(/^\d+\.\d{2}$/)])],
            mrp: ['', Validators.compose([Validators.required,Validators.pattern(/^\d+\.\d{2}$/)])],
            promo:['', Validators.compose([Validators.required,Validators.pattern(/^\d+\.\d{2}$/)])]
        }),
        inventory: this.fb.group({
            qty: ['', Validators.compose([Validators.required,Validators.pattern(/^\d+\.\d{2}$/)])],
            reorder: ['', Validators.compose([Validators.required,Validators.pattern(/^\d+\.\d{2}$/)])],
            unit: ['', Validators.required] 
        }),
        taxes: this.fb.group({
                exempt_tax: [''],
                taxid1: [''],
                taxid2: [''],
                taxname1: [''],
                taxrate1: ['', Validators.required],
                taxname2: ['', Validators.required],
                taxrate2: ['', Validators.required]

        })

   });

}

以下是表单代码

    <form class="form-horizontal" [formGroup]="newproductfrm"  id="newproductfrm" (ngSubmit)="onProductSave(newproductfrm)" novalidate>
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title">New Product</h4>
  </div>
  <div class="modal-body">

      <!--<div class="alert alert-warning" >
          <a href="#" class="close" data-dismiss="alert">&times;</a>
          <strong>Warning!</strong> There was a problem with your network connection.
      </div>-->

      <div class="row prd_row">

              <div class="col-lg-4">
                    <input type="text" class="form-control" name="prdbarcode" placeholder="Enter barcode *" formControlName="prdbarcode">
              </div>  


              <div class="col-lg-4">
                  <!--<label for="barcode">Barcode</label>-->
                  <input type="text" class="form-control" name="prdhsncode" placeholder="Enter HSN Code *" formControlName="prdhsncode">
              </div>


              <div class="col-lg-4">
                    <input type="text" class="form-control" name="prdname" placeholder="Enter Product Name *" formControlName="prdname">
              </div>


       </div>
       <div class="row prd_row">

            <div class="col-lg-4">
                  <select name="category" class="form-control col-md-4" formControlName="category" (change)="getSubCategory($event)">
                      <option value="" >Select Category</option>
                      <option  *ngFor='let maincat of mainCategoryList;' value="{{maincat.id}}">{{maincat.name}}</option>

                  </select>
            </div>  


            <div class="col-lg-4">

                <select name="subcategory" class="form-control col-md-4" formControlName="subcategory" >
                  <option value="">Select SubCategory</option>
                  <option  *ngFor='let subcat of subCategoryList;' value="{{subcat.id}}">{{subcat.name}}</option>

                </select>
            </div>


            <div class="col-lg-4">
                <select name="supplier" class="form-control col-md-4" formControlName="supplier">
                  <option value="">Select Supplier</option>

                </select>
            </div>
        </div>
        <!-- price -->
        <div class="row prd_row" formGroupName="pricing">
          <div class="col-lg-4">
               <input type="text" class="form-control" name="costprice" placeholder="Enter Cost Price"  formControlName="costprice">
          </div>  


          <div class="col-lg-4">
              <input type="text" class="form-control" name="mrp" placeholder="Enter MRP" formControlName="mrp">
          </div>


          <div class="col-lg-4">
              <input type="text" class="form-control" name="promo" placeholder="Enter Promo Price" formControlName="promo">
          </div>
        </div>
        <!-- Taxes -->
        <div class="row prd_row" formGroupName="taxes">
          <div class="col-lg-12">
               <input type="checkbox" name="exempt_tax" value="1" formControlName="exempt_tax" (click)="exemptRate($event)">&nbsp;<span>Tax Exempted</span> 
          </div>
          <div class="col-lg-12">
             <div class="table-responsive">
              <table class="table">
                   <tr *ngFor='let tax of taxesList;let trackBy=index;let rowIndex=index'>
                       <td>{{tax.name}}(%)<input type="hidden" class="form-control" name="taxid{{rowIndex+1}}" value="{{tax.taxid}}" formControlName="taxid{{rowIndex+1}}"><input type="hidden" class="form-control" name="taxname{{rowIndex+1}}" value="{{tax.name}}" formControlName="taxname{{rowIndex+1}}"></td>
                       <td><input type="text" class="form-control col-md-4" name="taxerate{{rowIndex+1}}" placeholder="Enter Rate" formControlName="taxrate{{rowIndex+1}}" value="{{tax.rate}}" id="taxrate{{rowIndex+1}}"></td>
                   </tr>

              </table>
            </div>
          </div>  


        </div>
        <!-- Inventory -->
        <div class="row prd_row" formGroupName="inventory">
          <div class="col-lg-4">
               <input type="text" class="form-control" name="qty" placeholder="Enter Stock Qty" formControlName="qty">
          </div>  


          <div class="col-lg-4">
              <input type="text" class="form-control" name="prd_reorder" placeholder="Enter Reorder Level" formControlName="reorder" formControlName="reorder">
          </div>

          <div class="col-lg-4">
              <select name="unit" class="form-control col-md-4" formControlName="unit">
                <option value="">Select Unit</option>
                <option value="Pack">Pack</option>
                <option value="KG">KG</option>
                <option value="Each">Each</option>
              </select>
          </div>


        </div>



  </div><!-- modal body -->
  <div class="modal-footer">
      <button type="submit" class="btn btn-primary pull-right" [disabled]="newproductfrm.invalid">Save Product</button>
  </div>
</form>

enter image description here

0 个答案:

没有答案