【发布时间】：2018-07-15 21:39:04
【问题描述】：
我一直在尝试使用响应式方法在 Angular 中创建一个表单。一切似乎都很好，直到我需要使用一个 FormArray 和一个嵌套在里面的 FormGroup 。我们的想法是获得一个看起来像下面的对象的输出，并且能够将任意数量的项目传递给 items 数组。
{
'companyName': '',
'nifcif': '',
'postcode': '',
'invoiceNo': 0,
'invoiceDate': 00/00/00,
'items': [{'itemQty' : 0, 'itemName' : 0, 'itemPrice' : 0}]
}
所以基本上所有表单都可以正常工作，直到项目部分除外。我收到此错误消息
Cannot find control with name: 'itemQty'
我必须以某种方式使每个项目的控件名称与其数组内的索引相连（我猜），但我尝试了不同的方法但没有成功。你能建议吗？提前致谢！！
这是我的 TS 文件（我还没有创建一个将更多项目传递给数组的方法）：
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, FormArray } from '@angular/forms';
@Component({
selector: 'app-process-invoice',
templateUrl: './process-invoice.component.html',
styleUrls: ['./process-invoice.component.css']
})
export class ProcessInvoiceComponent implements OnInit {
invoiceForm: FormGroup;
constructor() {}
ngOnInit() {
let items = new FormArray([new FormGroup({ 'itemQty': new FormControl(null), 'itemName': new FormControl(null)})])
this.invoiceForm = new FormGroup({
'companyName': new FormControl(null),
'nifcif': new FormControl(null),
'postcode': new FormControl(null),
'invoiceNo': new FormControl(null),
'invoiceDate': new FormControl(null),
'items': items
})
}
onSubmit() {
console.log(this.invoiceForm);
}
}
这里是我的html：
<form [formGroup]="invoiceForm">
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>Company Name:</h3><input formControlName="companyName" type="text" class="form-control form-control-sm" required/>
<p>NIF/CIF:</p><input formControlName="nifcif" type="text" class="form-control form-control-sm" required/>
<p>Postal Code:</p><input formControlName="postcode" type="text" class="form-control form-control-sm"/>
</div>
<div class="col-md-6">
<p>Invoice No.:</p><input formControlName="invoiceNo" type="number" class="form-control form-control-sm" required/>
<p>Date:</p><input formControlName="invoiceDate" type="date" class="form-control form-control-sm" required/>
</div>
</div>
</div>
<div class="container">
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th>Qty.</th>
<th>Product</th>
<th>Price</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input formControlName="itemQty" type="number" class="form-control form-control-sm" required/></td>
<td><input FormControlName="itemName" type="text" class="form-control form-control-sm" required/></td>
<td><input formControlName="itemPrice" type="number" class="form-control form-control-sm" required/></td>
<td><button class="btn btn-outline-primary">+</button></td>
<td><button class="btn btn-outline-danger">-</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="container border">
<div class="row">
<div class="col-3"><p>SubTotal : £</p><span></span></div>
<div class="col-3">
<div class="input-group">
<div class="input-group-prepend">VAT %</div>
<input type="number" class="form-control form-control" id="vat" name="vat" />
</div>
</div>
<div class="col-3"><p>Rebate</p></div>
<div class="col-3"><p>Total</p></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col"><button (click)="onSubmit()" type="submit" class="btn btn-success">Submit</button></div>
<div class="col"><button (click)="onDiscardInvoice()" class="btn btn-danger">Discard</button></div>
</div>
</div>
</form>
【问题讨论】：
-
我在您的 html 中没有看到 *ngFor、formArrayName="items" 和 [formGroupName]="i"。阅读文档angular.io/guide/…
-
完全正确，我一定是在我最后一次尝试使其工作时删除了它（在写这篇文章之前），但我缺少细节，引用 [form GroupName]="i"。我试图在很多网站和视频中找到解释，但从未检查过官方文档。现在感觉好傻！谢谢（如果有效，将更新帖子）
标签： angular angular-reactive-forms formarray