Angular 角度<；输入>；通过ng模板和；ngTemplateOutlet不是周围NgForm的一部分

我有一个可编辑表单的可重用组件。此组件包含一个

元素。在该表单中，插入了另一个组件提供的模板，其中包含

元素。该

元素不会成为可重用组件中

NgForm

的一部分。编辑

时，会更新其脏/原始和有效/无效属性，但不会更新表单的属性

以下是简化的可重用组件：

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

@组件({
选择器：“可编辑表单”，
模板：`
编辑{{title}}

当前{{title}
新{{title}
表单有效：{{dialogForm.Form.valid}}

表单脏：{{dialogForm.Form.dirty}}

提交
接近
{{title}}
`
})
导出类EditableFormComponent{
@输入（）标题：字符串；
@ContentChild（'displayTemplate'，{static:true}）displayTemplate:TemplateRef；
@ContentChild（'editTemplate'，{static:true}）editTemplate:TemplateRef；
@Output（）onSubmit=neweventemitter（）；
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; }
}

@组件({
选择器：“编辑名称”，
模板：`
{{name}}
未设定
控件有效：{{newNameInput.className.includes（'ng-valid'）}}

控件脏：{{newNameInput.className.includes（'ng-dirty'）}}

`
})
导出类EditNameComponent{
名称：字符串；
newName:string；
save（）{this.name=this.newName；}
}

我尝试了通过

viewProviders

，包括模板中的表单组件，通过

ContentChild

提供模板，而不是通过

Input

提供模板，它们不在

元素中

只有当表单元素通过组件包含在

下时，这些技术似乎都不适用于

ng模板

我被难住了。我只需要将传入可重用组件的输入作为可重用组件中声明的
的一部分