Question

我有一个包含子组件的组件。每个子项都包含一个使用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
        });
    }

}

我需要在按下保存按钮时验证所有子窗体。

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

设计这样一个组件的最佳方法是什么，用户不需要具有较长的垂直形式但是将其分解为可管理的子表单组件？
有没有办法重新使用创建的组件？

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

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

谢谢

Answer 1

您可以一次添加所有表单，只需使用

一次显示选择

[hidden]="someExpression"

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

角度2：多种形式

1 个答案: