Angular 2：多种形式答案

【问题标题】：Angular 2: Multiple FormAngular 2：多种形式
【发布时间】：2016-04-22 09:09:13
【问题描述】：

我有一个包含子组件的组件。每个孩子都包含一个使用 FormBuilder 构建的表单。为了清楚起见，我在组件中包含了 JADE 模板。此外，我使用组件路由器加载子组件。

@Component({
    selector: 'parent',
    template: `
        .detail-page
            .detail-header
                .ui.secondary.menu.inverted.orange
                    .item Inquiry Details
                    .right.menu
                        a.item((click)='add($event)')
                            i.plus.icon
                        a.item((click)='save($event)')
                            i.save.icon
            .detail-content 
                router-outlet
            .detail-footer
                a.item([routerLink]="['Child1']")
                a.item([routerLink]="['Child2']")
    `
})
@RouteConfig([
    { path: '/child1',                  name: 'Child1',                 component: Child1,          useAsDefault: true },
    { path: '/child2',                  name: 'Child2',                 component: Child2 }
])  
export class Parent {

    save(event) {
        event.preventDefault();

        // validate all child forms
        ???????
    }

}

@Component({
    template: `
        form([ngFormModel]='childForm1')
            input(type='text', [control]="field1")
            input(type='text', [control]="field2")
    `
})  
export class Child1 {

    constructor(
        private _formBuilder: FormBuilder
    ) {
        this.childForm1 = this._formBuilder.group({
            field1: this.field1,
            field2: this.field2
        });
    }

}

@Component({
    template: `
        form([ngFormModel]='childForm2')
            input(type='text', [control]="field1")
            input(type='text', [control]="field2")
    `
})  
export class Child2 {

    constructor(
        private _formBuilder: FormBuilder
    ) {
        this.childForm2 = this._formBuilder.group({
            field1: this.field1,
            field2: this.field2
        });
    }

}

按下保存按钮时，我需要验证所有子表单。

据我了解，在路由结束时只有一个子组件处于活动/初始化状态。因此，我无法遍历组件来验证表单。

设计这样一个组件的最佳方法是什么？如果有一个较长的垂直表单对用户不友好，但将其分解为可管理的子表单组件？
有没有办法重用创建的组件？

我在想我可以使用动态组件加载器，但我仍然只能访问当前加载的组件。

非常感谢您的建议/帮助。

谢谢

【问题讨论】：

一次添加所有组件并只显示一部分而隐藏其余部分怎么样？
隐藏我的意思是[hidden]="true而不是*ngIf="false"（它有效地从DOM中删除了内容。
感谢您的及时回复！我更新了我的问题以包括我用来加载组件的 routerLink。您的意思是将所有子模板加载到父模板本身并以某种方式隐藏特定部分吗？我可以试试。孩子的形式有点长，但我也会尝试一下。
您仍然可以将部件包装在组件中以保持父模板的大小较小，但验证仅针对 DOM 中实际存在的元素运行。（如果将表单的一部分包装成组件，那么这些组件中的表单将单独验证，您必须收集结果才能获得整体的状态。）
是的，我认为这是一个很好的建议。 IE。将模板部件移动到它们自己的组件中，但只有一个表单。我会尝试这种方法。非常感谢@GünterZöchbauer。

标签： javascript forms angular

【解决方案1】：

您可以一次添加所有表单，然后使用

一次显示其中的一部分

[hidden]="someExpression"

您仍然可以将部件包装在组件中以保持父模板的大小较小，但仅对 DOM 中实际存在的元素运行验证。（如果你将表单的一部分包装成组件，那么这些组件中的表单将被单独验证，你必须收集结果才能获得整体的状态。）

【讨论】：