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>

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

如上所述，这对于模板驱动的形式来说真的很难，所以使用模型驱动的形式，这可以很容易地实现。至于你的评论：

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，表单字段中的更改将被父级捕获！

原文地址：https://www.jb51.cc/angularjs/144007.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。

• 上一篇：如何访问Angular 2组件和服务中的常下一篇：angular – Ionic 3 Component vs