我想创建一个带有角度2的单个大表单。但是我想用多个组件创建这个表单，如下例所示。
应用组件
应用组件
<form novalidate #form1="ngForm" [formGroup]="myForm">
<div>
<address></address>
</div>
<div>
<input type="text" ngModel required/>
</div>
<input type="submit" [disabled]="!form1.form.valid" > </form>
地址组件
<div> <input type="text" ngModel required/> </div>
当我使用上面的代码时，它在我需要的浏览器中可见，但是当我删除地址组件中的文本时，未禁用提交按钮。
但是当我删除应用程序组件中输入框中的文本时，该按钮被正确禁用。
如上所述，这对于模板驱动的形式来说真的很难，所以使用模型驱动的形式，这可以很容易地实现。至于你的评论：
Is there any other simple example for this one? Maybe the same example without loops
我可以举个例子。您需要做的就是嵌套FormGroup并将其传递给子级。
假设您的表单看起来像这样，并且您希望将地址表单组传递给子表单：
ngOnInit() {
this.myForm = this.fb.group({
name: [''],address: this.fb.group({ // create nested formgroup to pass to child
street: [''],zip: ['']
})
})
}
然后在您的父级中，只需传递嵌套的formgroup：
<address [address]="myForm.controls.address"></address>
在您的孩子中，使用@Input作为嵌套表单组：
@input() address: FormGroup;
在您的模板中使用[formGroup]：
<div [formGroup]="address"> <input formControlName="street"><br> <input formControlName="zip"> </div>
好消息是，您甚至不需要在这里使用@Output，表单字段中的更改将被父级捕获！
总结
以上是DEVMAX为你收集整理的angular – 通过验证将表单分成多个组件全部内容。
如果觉得DEVMAX网站内容还不错，欢迎将DEVMAX网站推荐给好友。