Angular 在子组件中具有多个formControl的ControlValueAccessor

我在子组件中有多个FormControl，如何在子组件中应用验证器，使原始表单无效。最好使用ControlValueAccessor实现它，但要从简单的@input form group开始

@组件({
选择器：“我的孩子”，
模板：`
小孩
`
})
导出类子类{
@输入（）
子窗体：窗体组；
}

---

我不知道为什么这个问题被否决了，但我觉得这可能对其他人有帮助，所以我现在发布答案。 在多次尝试绑定孩子的formgroup后，我成功地绑定了这个值

@组件({
选择器：“我的孩子”，
模板：`
小孩
`,
供应商：[
{provide:NG\u VALUE\u访问器，useExisting:Child，multi:true}
]
})
导出类子实现ControlValueAccessor{
姓名:FormGroup ;；
构造函数（fb:FormBuilder）{
this.name=fb.group({
名字：['']，
姓氏：['']
});
}
writeValue（值：任意）{
如果（值）{
this.name.setValue（值）；
}
}
registerOnChange（fn:（值：any）=>void）{
this.name.valueChanges.subscribe（fn）；
}
寄存器（）{}
}

---

起初，这对我帮助很大，但后来我发现，我们把事情复杂化了。我们不必构建自己的formControl，只需将formGroup传递给子组件即可。 在父组件中，而不是

this.form=fb.group({
名称：['Angular2（发布候选！）]，
用户名：[{firstName:'First'，lastName:'Last'}]，
电子邮件：[“我的电子邮件”]
});

我们将用户名初始化为FormGroup，而不是控件：

this.form=fb.group({
名称：['Angular2（发布候选！）]，
用户名：fb.group({
名字：[“第一”]，
lastName:['Last']
}),
电子邮件：[“我的电子邮件”]
});

在子组件中，我们需要FormGroup的输入属性

@Input（）
usernameGroup:FormGroup；

在子模板中：

然后在父模板中：

有关更多信息，请查看此帖子：

---

在这里构建您自己的formControl真的是一项过火的工作，有关这方面的更多信息，请查看此处：

您想要做的事情可以更容易地实现，而无需实现ControlValueAccessor。 相反，您可以简单地将子组件中的viewProviders设置为使用现有的父NgForm作为ControlContainer

然后，无需将表单/表单组作为输入参数传递给子组件，因为表单控件将自动成为父级表单的一部分

child.component.ts：

@组件({
选择器：'子'，
templateUrl:“./child.component.html”，
视图提供程序：[{provide:ControlContainer，useExisting:NgForm}]
})
导出类子类{
@输入（）名字；
@Input（）lastName；
}

input-child.component.html：

Child

parent.component.html：

谢谢。这对我很有用。你知道如何在内部和外部使用子窗体吗？scotch.io教程演示了如何添加到数组中，但我需要在ngFor中使用嵌套表单。假设我有一个项目数组，我需要为每个项目添加一个字段，然后将所有这些值聚合回主窗体。