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 в родительском компоненте из компонентов в содержимом навигации?

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>