角度2:多种形式
Angular 2: Multiple Form
我有一个包含子组件的组件。每个子项都包含一个使用表单生成器构建的表单。为了清楚起见,我在组件中包含 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]="someExpression"
您仍然可以将部件包装在组件中以保持父模板的大小较小,但验证仅对 DOM 中实际存在的元素运行。 (如果将窗体的各个部分包装到组件中,则将单独验证这些组件中的窗体,并且必须收集结果才能获得整体的状态。
相关文章:
- 有效形式-始终只显示1个错误[角度]
- AngularJS-使用多种形式
- 指定在javascript中以多种形式单击的按钮
- 角度,材料形式只说提交尝试后需要字段
- 我的角度形式输入[数字]验证不起作用
- 禁用所需输入时,角度形式无效
- 角度 2 组合形式验证
- 如何在角度js中以单个形式创建多个组输入类型
- 角度2:多种形式
- 在不中断形式帖子的情况下在角度中设置变量
- 输入文本是't在一种情况下以相同的形式更新与另一种情况相同的角度模型
- 这可能只使用有角度的形式吗
- 如何将javascript数组更改为角度模式形式的JSON对象
- 以角度形式将一个输入字段值连接(附加)到另一个字段
- 无法访问第二形式角度上的字段
- 使用具有多种形式的Javascript写入文本文件
- 具有多种形式的bootstrap单模式窗口
- CRM 2011 -针对一个实体的多种形式
- Django-TinyMCE 具有多种形式
- 多种形式&导航远离未保存的更改