Angular2 ng-bootstrap nav，带有嵌套的模板驱动表单

Question

我一直在使用 Angular2 嵌套模板驱动表单中的答案(以及其中的文章(来使用子嵌套表单控件。这很好，直到我尝试在 Ng-Bootstrap Nav 组件中使用子组件，如下所示：

<ul ngbNav #nav="ngbNav" class="nav-tabs">
<li ngbNavItem>
<a ngbNavLink>One</a>
<ng-template ngbNavContent>
<nav-content-1></nav-content-1>
</ng-template>
</li>
</ul>
<form #form="ngForm">
<div [ngbNavOutlet]="nav"></div>
</form>

@Component({
selector: 'nav-content-1',
template: `
<h5>NavContent1</h5>
<fieldset ngModelGroup>
<label>Last Name</label>
<input type="text" name="lastName" ngModel>
</fieldset>
`,
viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
})
export class NavContent1Component {}

此时，我收到错误NullInjectorError: No provider for NgForm。

我刚刚开始掌握提供者的窍门，所以请耐心等待。但似乎ngbNavContent中声明的组件没有注册为父组件的子组件，因此无法找到任何可能继承的提供程序。

如果是这种情况，有没有办法从导航内容中的组件直接引用父组件中的NgForm？

堆栈闪电战

Answer 1

谢谢你@yurzui回答我的问题并向我展示我的方式的愚蠢。表单标记也需要环绕在导航周围。

<form #form="ngForm">
<ul ngbNav #nav="ngbNav" class="nav-tabs">
<li ngbNavItem>
<a ngbNavLink>One</a>
<ng-template ngbNavContent>
<nav-content-1></nav-content-1>
</ng-template>
</li>
</ul>
<div [ngbNavOutlet]="nav"></div>
</form>