Угловой <input>, предоставляемый через ng-template & ngTemplateOutlet, не является частью окружающего NgForm

Question

У меня есть повторно используемый компонент для редактируемой формы. Этот компонент содержит элемент <form>. Внутри этой формы вставлен шаблон, предоставленный другим компонентом, содержащим элемент <input>. Этот элемент <input> не становится частью NgForm в повторно используемом компоненте. При редактировании <input> его грязные / нетронутые и действительные / недействительные свойства обновляются, но формы нет.

Вот упрощенный компонент многократного использования:

@Component({
  selector: 'editable-form',
  template: `
<ng-template #dialogTemplate>
  <div>
    <h3>Edit {{title}}</h3><hr/>

    <h4>Current {{title}}</h4>
    <ng-container *ngTemplateOutlet="displayTemplate"></ng-container>

    <form #dialogForm="ngForm" novalidate (ngSumbit)="submit()">
      <h4>New {{title}}</h4>
      <ng-container *ngTemplateOutlet="editTemplate"></ng-container>

      <div>
        Form valid: {{dialogForm.form.valid}}<br/>
        Form dirty: {{dialogForm.form.dirty}}<br/>
      </div>

      <div>
        <button type="submit" [disabled]="!dialogForm.form.valid || !dialogForm.form.dirty">Submit</button>
        <button type="button" (click)="close()">Close</button>
      </div>
    </form>
  </div>
</ng-template>

<h4>{{title}}</h4>
<ng-container *ngTemplateOutlet="displayTemplate"></ng-container>

<ng-container *ngIf="showForm">
  <ng-container *ngTemplateOutlet="dialogTemplate"></ng-container>
</ng-container>`
})
export class EditableFormComponent {
  @Input() title: string;
  @ContentChild('displayTemplate', { static: true }) displayTemplate: TemplateRef<ElementRef>;
  @ContentChild('editTemplate', { static: true }) editTemplate: TemplateRef<ElementRef>;
  @Output() onSubmit = new EventEmitter();
  showForm: boolean = true;

  open() { this.showForm = true; }
  close() { this.showForm = false; }
  submit() { this.onSubmit.next(); }
}

А воткомпонент, который его использует:

@Component({
  selector: 'edit-name',
  template: `
<editable-form title="Name" (onSubmit)="save()">
  <ng-template #displayTemplate>
    <div *ngIf="name">{{name}}</div>
    <div *ngIf="!name">Not Set</div>
  </ng-template>

  <ng-template #editTemplate>
    <input [(ngModel)]="newName" #newNameInput
           name="newName"
           id="newName"
           required
           ngbAutofocus>

    <div>
      Control valid: {{newNameInput.className.includes('ng-valid')}}<br/>
      Control dirty: {{newNameInput.className.includes('ng-dirty')}}<br/>
    </div>
  </ng-template>
</editable-form>`
})
export class EditNameComponent {
  name: string;
  newName: string;

  save() { this.name = this.newName; }
}

Я пытался предоставить ControlContainer - viewProviders, предоставить ControlContainer через директиву , включая компоненты формы вшаблоны через общую службу , предоставляющую шаблоны через ContentChild вместо Input, а не внутри элемента <editable-form>.

Кажется, что ни один из этих методов не работает сng-template, только если элементы формы включены в <form> через компонент.

Я в тупике. Мне просто нужно, чтобы входные данные, которые я передаю повторно используемому компоненту, были частью <form>, объявленного в повторно используемом компоненте.