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>

我的选择控件工作正常。当我将它直接包含在表单上（不使用）时，它也可以正常工作。我的<multiform>也被预测得很好。现在是时候把它变成一个真实的形式，那就是一切都崩溃了。

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

但我不能这样做：

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

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

所以这里的arcitecture看起来像这样：

<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：

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

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

学生下拉
教师下拉列表

所以你应该有一个单独的<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呈现自定义表单控件

multiform.control.html

多种形式-page.component.html

1 个答案: