角度2:多种形式

Angular 2: Multiple Form

本文关键字:多种形式 角度      更新时间:2023-09-26

我有一个包含子组件的组件。每个子项都包含一个使用表单生成器构建的表单。为了清楚起见,我在组件中包含 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
        });
    }
}
按下

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

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

  1. 设计这样一个组件的最佳方法是什么,其中具有较长的垂直窗体不是用户友好的,而是将其分解为可管理的子窗体组件?
  2. 有没有办法重用创建的组件?

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

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

谢谢

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

[hidden]="someExpression"

您仍然可以将部件包装在组件中以保持父模板的大小较小,但验证仅对 DOM 中实际存在的元素运行。 (如果将窗体的各个部分包装到组件中,则将单独验证这些组件中的窗体,并且必须收集结果才能获得整体的状态。