Angular provided through ng-template & ngTemplateOutlet is not part of surrounding NgForm

Question

I have a reusable component for an editable form. This component contains a <form> element. Inside that form, a template provided from another component, one containing an <input> element, is inserted. That <input> element does not become part of the NgForm in the reusable component. When editing the <input>, its dirty/pristine and valid/invalid properties are updated, but the form's are not.

Here is the simplified reusable component:

@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(); }
}

And here is a component that uses it:

@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; }
}

I have tried providing the ControlContainer through viewProviders, providing the ControlContainer through a directive, including the form components in the templates through a shared service, providing the templates through ContentChild versus through Input with them not inside the <editable-form> element..

None of those techniques seem to work with ng-template, only if the form elements are included under the <form> via a component.

I'm stumped. I just need the inputs I pass in to the reusable component to be part of the <form> declared in the reusable component.