我想创建一个带有角度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,表单字段中的更改将被父级捕获!