Question

我有一个包含表单的“基本”组件。在该表单中，有两个表单控件，我不想在其中定义，而是在ng-container中使用*ngTemplateOutlet。这样做时，出现错误：formGroup expects a FormGroup instance.。该消息是正确的，因为表单控件必须存在于表单组中。我以为我可以通过ngTemplateOutletContext传递上下文并解决问题，但是那根本行不通。可视化我在做什么：

对于“基本”组件：

selector: 'app-component-a',

carFormGroup: FormGroup = this.fb.group({
	type: [''],
	model: [''],
	color: [''],
	country: [''],
	revenue: ['']
});

constructor(private fb: FormBuilder) {
}

<form [formGroup]="carFormGroup" (ngSubmit)="save()">
	<div id="grid-cell-car-manufacturer-details">
	<ng-container
	  [ngTemplateOutlet]="carDetailsTemplate"
	  [ngTemplateOutletContext]="{carFormGroup: carFormGroup}"></ng-container>
	</div>
</form>

和第二个组件的模板（使用基础组件）：

<ng-template #bComponentOwnTemplate let-carFormGroup>
	<form [formGroup]="carFormGroup">
		<ul class="manufacturer-details">
		  <li><input type="text" formControlName="country"></li>
		  <li><input type="text" formControlName="revenue"></li>
		</ul>
	</form>
</ng-template>

<app-component-a
[carFormGroup]="bComponentOwnTemplate"></app-component-a>

但是它不起作用，仍然得到formGroup expects a FormGroup instance.。我正在尝试做的甚至有可能吗？我可以在“基本”组件中有一个表单，并通过ng-template在另一个组件中定义其某些控件吗？

Answer 1

您将上下文定义为

{carFormGroup: carFormGroup}

，您正尝试通过{p>在ng-template内部访问它

let-carFormGroup

对于ngTemplateOutletContext我所做的一切，我要么更改为

let-carFormGroup="carFormGroup"

或将上下文更改为

{$implicit: carFormGroup}

所以我可以使用普通的let-carFormGroup来访问它。

很高兴我可以帮忙。

具有ng-template的ReactiveForm

1 个答案: