【发布时间】：2019-12-11 04:58:39
【问题描述】：
我已经映射了 formcontrolname 但仍然无法检测到它？似乎是什么问题？
这是我的 html 表单代码
<form [formGroup]="purchaseOrderForm">
<div class="row">
<!-- vendor -->
<div class="col-md-6" *ngIf="showVendor">
<div class="form-group">
<!-- <input type="text" formControlName="inputVendor" class="form-control" placeholder="Vendor"> -->
<ng-select [items]="vendorListHolder" formControlName="inputVendor" class="custom"></ng-select>
</div>
</div>
<!-- Order Number -->
<div class="col-md-6">
<div class="form-group">
<input type="text" formControlName="inputOrderNumber" class="form-control"
placeholder="Order Number">
</div>
</div>
<!-- Address -->
<div class="col-md-6">
<div class="form-group">
<input type="text" formControlName="inputAddress" class="form-control" placeholder="Address">
</div>
</div>
<!-- Payment Status -->
<div class="col-md-6">
<div class="form-group">
<input type="text" formControlName="inputPaymentStatus" class="form-control"
placeholder="Payment Status">
</div>
</div>
<!-- Total Paid -->
<div class="col-md-6">
<div class="form-group">
<input type="number" formControlName="inputTotalPaid" class="form-control"
placeholder="Total Paid">
</div>
</div>
<!-- Total Amount -->
<div class="col-md-6">
<div class="form-group">
<input type="number" formControlName="inputTotalAmount" class="form-control"
placeholder="Total Amount">
</div>
</div>
<div class="col-md-12">
<div (click)="addItemFields()">asdasdasd</div>
<!-- start of table -->
<div class="table-responsive">
<table class="table align-items-center table-flush">
<thead class="thead-light">
<tr scope="row">
<th scope="col">Item Name</th>
<th scope="col">Quantity</th>
<th scope="col">Price </th>
<th scope="col">Sub Total</th>
</tr>
</thead>
<tbody>
<tr scope="row" formArrayName="itemForm" *ngFor="let group of itemsArray.controls; let i = index;" [formGroupName]="i">
<th scope="col">
<div class="media align-items-center">
<!-- item-->
<div *ngIf="showItems">
<div class="form-group">
<ng-select (change)="onSelectedItem()" [items]="itemListHolder" class="custom" formControlName="itemSelected"></ng-select>
<!-- [(ngModel)]="itemSelected" -->
<!-- [ngModelOptions]="{standalone: true}" -->
</div>
</div>
</div>
</th>
<th scope="col">
<div class="form-group">
<input type="number" formControlName="inputQuantity" class="form-control" placeholder="Quantity">
</div>
</th>
<th scope="col">
<div class="form-group">
<input type="number" formControlName="inputPrice" class="form-control" placeholder="Price asdasdasd">
</div>
</th>
<th scope="col">
<div class="form-group">
<input type="number" formControlName="inputSubTotal" class="form-control" placeholder="Sub Total">
</div>
</th>
</tr>
</tbody>
</table>
</div>
<!-- end of table -->
</div>
<button class="btn btn-icon btn-3 btn-success" type="button" (click)="test()">
<span class="btn-inner--icon">
<i class="ni ni-fat-add"></i>
</span>
<span class="btn-inner--text">Save</span>
</button>
<button class="btn btn-icon btn-3 btn-danger" type="button" (click)="addPurchase()">
<span class="btn-inner--icon">
<i class="ni ni-fat-add"></i>
</span>
<span class="btn-inner--text">Cancel</span>
</button>
</div>
</form>
这是我的 component.ts 代码
addPurchase(){
this.purchaseOrderForm = this.fb.group({
inputOrderNumber: [''],
inputVendor: [this.vendorSelected],
inputAddress: [''],
inputPaymentStatus: [''],
inputTotalPaid: [''],
inputTotalAmount: [''],
itemForm: this.fb.array([this.addItemGroup()])
}
addItemGroup(){
return this.fb.group({
itemSelected: [],
inputQuantity: [],
inputPrice: [],
inputSubTotal: []
});
}
addItemFields(){
this.itemsArray.push(this.addItemGroup());
}
remoteItemFields(index){
this.itemsArray.removeAt(index);
}
get itemsArray(){
return <FormArray>this.purchaseOrderForm.get('itemForm') as FormArray;
}
test() 方法仅适用于控制台。我只是想在控制台中查看值
我已将输入字段放在表格中，所以我希望它没关系
请帮助 :( 试图弄清楚几个小时。
顺便说一句，即使出现错误，我也可以动态添加字段
【问题讨论】：
标签： angular angular-reactive-forms angular-forms formarray