Angular2 ng-bootstrap 具有嵌套模板驱动形式的导航

Question

我一直在使用 Angular2 nested template driven form to use child-nested form controls. Which is great until I try to use the child component within a Ng-Bootstrap Nav component 的答案（以及其中的文章），例如：

<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？

StackBlitz

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>

Angular2 ng-bootstrap 具有嵌套模板驱动形式的导航

Angular2 ng-bootstrap nav with nested template-driven form

angular

angular2-forms

angular-forms

ng-bootstrap