Angular2(Ionic2)：从外部处理内部组件中的表单

Question

美好的一天。当存在嵌套表单时，我无法弄清楚如何使用适当的样式处理表单验证。我想要完成的事情如下：我有一个页面，在这个页面上我显示了带有四个选项卡的选项卡组件。每个选项卡都是单独的@Page。我目前正在处理的一页有一些组件的列表 (ItemListCmp)。每个单独的组件（我们称之为 ItemCmp）都有一个表单。这个表单应该被验证并且在无效状态的情况下用 ItemCmp 的样式做一些事情。 ItemListCmp 也有一个包装这堆 ItemCmp 组件的表单，当所有内部表单的总和状态时，也应该以某种方式通知(ItemCmp) 变化。

你能帮我解决一下吗，或者指出一些与这个问题相关的信息来源。谢谢

Answer 1

我会为 ItemListCmp 和 ItemCmp 创建 ngForm / ngControl 兼容组件。这样您就可以通过 valid 属性来利用它们的状态，并应用一些验证。您将能够将每个组件作为控件添加到每个级别的包含表单中。

下面的文章将在 "NgModel-compatible component" 部分给出一些关于如何实现它的提示：

http://restlet.com/blog/2016/02/17/implementing-angular2-forms-beyond-basics-part-2/

这个问题还可以给你更详细的信息：

Answer 2

我已经通过使用@ViewChildren 装饰器完成了这项工作。简单地说 - 在我的 ItemListCmp 中，我在 AfterViewInit 组件生命周期回调[=12= 中动态创建表单（但没有 "form" html 标签） ]

// somewhere at the class ItemListCmp
@ViewChildren(ItemCmp) itemCmps: QueryList<ItemCmp>;


ngAfterViewInit() {
const iCmps = this.itemCmps.toArray();
iCmps.map((c: ItemCmp, key: number) => {
  this.listForm.addControl(key.toString(), c.itemForm);
});
this.listForm.statusChanges
  .debounce(() => Observable.timer(800))
  .distinctUntilChanged()
  .subscribe((status: string) => {
  if (status === 'VALID') {
    this.onStatusChanged.emit(1);
  } else {
    this.onStatusChanged.emit(0);
  }
});
}

http://blog.mgechev.com/2016/01/23/angular2-viewchildren-contentchildren-difference-viewproviders/帮了我大忙

Angular2(Ionic2)：从外部处理内部组件中的表单

Angular2(Ionic2): Handling the forms in inner component from the outer

typescript

ionic2

angular