angular - 通过验证将表单分成多个组件

Question

我想创建一个 Angular 为 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>

当我使用上面的代码时，它在我需要的浏览器中可见，但是当我删除地址组件中的文本时，提交按钮没有被禁用。
但是当我删除应用程序组件中输入框中的文本时，该按钮被正确禁用。

Answer 1

我会使用一种效果很好的响应式(Reactive)形式，关于您的评论:

Is there any other simple example for this one? Maybe the same example without loops

我可以举个例子。您需要做的就是嵌套一个 FormGroup 并将其传递给 child 。

假设您的表单看起来像这样，并且您想将 address 表单组传递给 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>

在您的 child 中，使用 @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>

这是一个

Demo 第一个选项，这里是第二个 Demo

更多信息 here关于嵌套模型驱动表单。