Angular 没有以角度获取反应形式中的所有值
我使用的是被动表单,并使用它提交给服务器。问题是我得到了一些表单字段值,但有些字段是空的。在下面的代码中,我得到了除税务组下的值之外的所有值。Angular 没有以角度获取反应形式中的所有值,angular,angular-reactive-forms,reactive-forms,Angular,Angular Reactive Forms,Reactive Forms,我使用的是被动表单,并使用它提交给服务器。问题是我得到了一些表单字段值,但有些字段是空的。在下面的代码中,我得到了除税务组下的值之外的所有值。taxesList是动态加载的对象数组。如果你对此有任何解决办法,请帮助我 ngOnInit() { this.newproductfrm = this.fb.group({ prdbarcode: ['', [Validators.required]], prdhsncode: ['', [Validators.r
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>
&时代;
新产品
选择类别
{{maincat.name}
选择子类别
{{subcat.name}
选择供应商
免税
{{tax.name}}(%)
选择单位
包裹
公斤
每个
保存产品
哪些未显示?税务组下未显示的值:税务:this.fb.group({免税税:[''、taxid1:[''、taxid2:[''、taxname1:[''、taxrate1:[''、Validators.required]、taxname2:[''、Validators.required],taxrate2:['',Validators.required]}),我假设您在没有隐藏属性的情况下尝试了这个方法?那么它也不起作用了吗?有一些隐藏的表单元素和文本输入元素。。没有一个值被发布。。我正在附上发布数据的屏幕截图。但是,如果删除隐藏属性,或者更确切地说,将其设置为“文本”,它们会被发布吗?