ng-content 呈现自定义表单控件

Question

我正在开发一个多页表单（有点像向导），它将包含一页或多页控件，这些控件将是自定义控件。

这是我正在尝试开发的图片：

这是（截至目前）模板驱动的表单，这是其背后的模板：

<multiform [debug]="true" [title]="'New Job'">
    <multiform-page [title]="'Basics'" >Page for job basics
        <trk-select
            [placeholder]="'Research Client'"
            [fieldId]="fields.client.key"
            [options]="toTrkOptions(fields.client)"
            [multiple]="true">
        </trk-select>
    </multiform-page>
    <multiform-page [title]="'Detail 1'" >This is the first detail page</multiform-page>
    <multiform-page [title]="'Detail 2'" >More details go here</multiform-page>
</multiform>

我本来打算 <form> 在 <multiform>:

multiform.control.html

{{title}}
<div class="tabset">
    <a *ngFor="let page of pages"
       [class.tab]="true"
       [class.hidden-tab]="false"
       [class.active]="page.active"
       (click)="activatePage(page)">
        {{page.title}}
    </a>
</div>
<form #form="ngForm">
    <ng-content></ng-content>
</form>

<div *ngIf="debug">
    <h1>Form Values</h1>
    <pre>{{form.value | json}}</pre>
</div>

每个 <multiform-page> 中都有许多自定义表单控件。在此示例中，只有一个 <trk-select> 控件，但它会增长。

投影各个表单控件，如下所示：

多形式-page.component.html

<div class="content" [class.active]="active">
    <ng-content></ng-content>
</div>

我的 select 控件工作正常。当我将它直接包含在表单中（不使用）时，它也能正常工作。它也被很好地投射到我的 <multiform> 上。现在是时候让它成为一个真正的形式了，那是一切都崩溃的时候。

我希望 multiform 拥有实际的 <form> 组件，并将控件绑定到它。

但是我做不到:

<div class="content" [class.active]="active">
    <ng-content [(ngModel)]="field"></ng-content>
</div>

因为我不知道这里的field是什么。（记住，会有多个控件，它们不能都绑定到同一个变量）

所以这里的架构看起来像这样：

<multiform>
  |--> has <form>
  |--> projects <multiform-page>
                     |
                     |--> projects custom control 1
                     |--> projects custom control 2

但我不知道如何将这些控件绑定到窗体。我该怎么做？

Answer 1

您应该使用选择器

<div class="content" [class.active]="active">
    <ng-content select=".multiform-body"></ng-content>
</div>

并且您必须将 html 推为

<div>
   <div class="multiform-body>
      ...........................................
      these contents are replaced in your multiform component
    </div>
</div>

更新：

<multiform [debug]="true" [title]="'New Job'">
    <multiform-page [title]="'Basics'" >Page for job basics
    <div class="multiform-body">
        <basics-component> </basics-component>
    </div>


    </multiform-page>
    <multiform-page [title]="'Detail 1'" >
    <div class="multiform-body">
        <detail1-component> </detail1-component>
        This is the first detail page
    </div>
    </multiform-page>
    <multiform-page [title]="'Detail 2'" >

    <div class="multiform-body">
        <detail2-component> </detail12-component>
        This is the first detail page
    </div>

    </multiform-page>
</multiform>

更新 2：

当您使用将在整个应用程序中使用的自定义控件时，您可以将它们组合在一起作为 CustomControl，并将它们单独作为单独的组件。

例如，您的应用程序中有以下组件

学生下拉菜单
教师下拉列表

所以你应该有一个单独的 <students-dropdown> 和 <teachers-dropdown> 使用一些输入和输出变量来操作数据。

根据评论更新以绑定所选值<trk-select>，遵循这些

<trk-select (change)="trkChanged($event)"><trk-select>

<detail-component (trkChange)="trkChanged($event)"> </detail-component>

<multi-form>
   <detail-component (trkChange)="trkChanged($event)"> </detail-component>
</multi-form>

所以三个在各自的组件中发出变量。

ng-content 呈现自定义表单控件

ng-content rendered custom form controls

transclusion

angular2-forms

angular

multiform.control.html

多形式-page.component.html