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

发布时间：2020-12-17 08:03:57 所属栏目：安全来源：网络整理

导读：我想创建一个带有角度2的单个大表单。但是我想用多个组件创建这个表单，如下例所示。应用组件 form novalidate #form1="ngForm" [formGroup]="myForm"div address/address/divdiv input type="text" ngModel required//divinput type="submit" [disabled]="

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!