我想用角度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>
当我使用上面的代码时,它在我需要的浏览器中可见,但是当我删除地址组件中的文本时,未禁用提交按钮。
但是当我删除应用程序组件中输入框中的文本时,该按钮被正确禁用。
答案 0 :(得分:61)
我会使用一种非常好的反应形式,以及你的评论:
这个还有其他简单的例子吗?也许是没有循环的相同例子
我可以举个例子。您需要做的就是嵌套FormGroup
并将其传递给孩子。
我们假设您的表单看起来像这样,并且您希望将address
formgroup传递给child:
ngOnInit() {
this.myForm = this.fb.group({
name: [''],
address: this.fb.group({ // create nested formgroup to pass to child
street: [''],
zip: ['']
})
})
}
然后在您的父级中,只需传递嵌套的表单组:
<address [address]="myForm.get('address')"></address>
在您的孩子中,使用@Input
作为嵌套表单组:
@Input() address: FormGroup;
在您的模板中使用[formGroup]
:
<div [formGroup]="address">
<input formControlName="street">
<input formControlName="zip">
</div>
如果您不想创建实际的嵌套表单组,则不需要这样做,您可以将父表单传递给子表单,因此如果您的表单如下所示:
this.myForm = this.fb.group({
name: [''],
street: [''],
zip: ['']
})
你可以传递你想要的任何控制。使用与上面相同的示例,我们只想显示street
和zip
,子组件保持不变,但模板中的子标记将如下所示:
<address [address]="myForm"></address>
这是
第一个选项的有关嵌套模型驱动表单的更多信息here。
答案 1 :(得分:5)
根据我的经验,使用模板驱动的表单很难形成这种表单字段组合。嵌入在地址组件中的字段不会在表单(NgForm.controls对象)中注册,因此在验证表单时不会考虑这些字段。
答案 2 :(得分:3)
也有一种方法可以在模板驱动的表单中执行。 ngModel在每个组件上自动创建一个单独的表单,但是您可以通过将其添加到组件中来注入父组件的表单:
@Component({
viewProviders: [{ provide: ControlContainer, useExisting: NgForm}]
}) export class ChildComponent
不过,您必须确保每个输入都有唯一的名称。因此,如果使用* ngFor调用子组件,则必须将索引(或任何其他唯一标识符)放入名称中,例如:
[name]="'address_' + i"
如果要将表单结构化为FormGroups,请使用ngModelGroup和
viewProviders: [{ provide: ControlContainer, useExisting: NgModelGroup }]
代替ngForm并添加
[ngModelGroup]="yourNameHere"
到包含标签的html子组件中。
答案 3 :(得分:2)
我想分享在我的案例中完成工作的方法。我创建了以下指令:
import { Directive } from '@angular/core';
import { ControlContainer, NgForm } from '@angular/forms';
@Directive({
selector: '[appUseParentForm]',
providers: [
{
provide: ControlContainer,
useFactory: function (form: NgForm) {
return form;
},
deps: [NgForm]
}
]
})
export class UseParentFormDirective {
}
现在,如果您在子组件上使用此指令,例如:
<address app-use-parent-form></address>
来自AddressComponent的控件将添加到form1中。因此,表单有效性还取决于子组件内部的控件状态。
仅使用Angular 6进行检查