我正在使用反应形式并使用它提交给服务器。问题是我得到的一些表单字段值,但有些是空白。在下面的代码中,我得到除税组下的值以外的所有值。 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">×</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">×</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)"> <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>