错误:在向formArray添加新组件时，formGroup需要一个formGroup实例

Question

我使用的是反应式表单方法。我有一个表单(父组件名为：DeductionInvoicesComponent(：

<form [formGroup]="deductionForm">
<div formArrayName="items" class="well well-lg">
<app-deduction-invoice-item
*ngFor="let item of deductionForm.get('items')?.controls; let i=index"
[index]="i"
(removed)="deductionForm.get('items').removeAt($event)">
</app-deduction-invoice-item>
</div>
</form>
<button type="button" class="btn btn-primary" (click)="addItem()">Add an item</button>

父级的TypeScript如下：

export class DeductionInvoicesComponent implements OnInit {
deductionForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.deductionForm = this.fb.group({
items: this.fb.array([])
});
}
addItem(){
let control = <FormArray>this.deductionForm.controls.items;
control.push(DeductionInvoiceItemComponent.buildItem());
}
}

该表单可以包含多个DeductionInvoiceItemComponents作为一个formArray。子组件(名为：DeductionInvoiceItemComponent的单个项(如下所示：

<div class="row" [formGroup]="item">
<div class="form-group col-4">
<label class="center-block">Title</label>
<select class="form-control" formControlName="title">
<option value="test">test</option>
</select>
</div>
<div class="form-group col-4">
<label class="center-block">Invoice Number</label>
<input class="form-control" formControlName="invoiceNumber">
</div>
<button (click)="removed.emit(index)" type="button" class="close text-danger" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>

表示formArray项的单个组件的TypeScript如下所示：

export class DeductionInvoiceItemComponent {
@Input()
public index: number;
@Input()
public item: FormGroup;
@Output()
public removed: EventEmitter<number> = new EventEmitter<number>();
static buildItem() {
return new FormGroup({
title: new FormControl('', Validators.required),
invoiceNumber: new FormControl('', Validators.required),
grossAmount: new FormControl('', Validators.required)
});
}
}

当我点击按钮addItem()时，我会收到以下错误消息：

错误：formGroup需要一个formGroup实例

如您所见，我使用名为buildItem的静态函数创建了FormGroup。如何解决此问题？

Answer 1

在扣除InvoiceItemComponent中，您有：

@Input()
public item: FormGroup;

但是您没有将其作为父组件的输入传递。添加它：

<app-deduction-invoice-item
*ngFor="let item of deductionForm.get('items')?.controls; let i=index"
[index]="i"
[item]='item' // <-- HERE
(removed)="deductionForm.get('items').removeAt($event)">
</app-deduction-invoice-item>