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

Question

我想创建一个带有角度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

我会使用一个非常好的反应形式,至于你的评论:

这个还有其他简单的例子吗？也许是没有循环的相同例子

我可以举个例子.你需要做的就是筑巢FormGroup并将其传递给孩子.

假设您的表单看起来像这样,并且您希望将addressformgroup 传递给child:

ngOnInit() {
  this.myForm = this.fb.group({
    name: [''],
    address: this.fb.group({ // create nested formgroup to pass to child
      street: [''],
      zip: ['']
    })
  })
}

然后在您的父级中,只需传递嵌套的formgroup:

<address [address]="myForm.get('address')"></address>

在您的孩子中,@Input用于嵌套表单组:

@Input() address: FormGroup;

在您的模板中使用[formGroup]:

<div [formGroup]="address">
  <input formControlName="street">
  <input formControlName="zip">
</div>

这是一个

演示

更多信息在这里关于嵌套模型驱动的形式.

Answer 2

在模板驱动的表单中也有一种方法可以做到这一点。ngModel 会在每个组件上自动创建一个单独的表单，但您可以通过将其添加到您的组件中来注入父组件的表单：

@Component({
viewProviders: [{ provide: ControlContainer, useExisting: NgForm}]
}) export class ChildComponent

但是，您必须确保每个输入都有唯一的名称。因此，如果您使用 *ngFor 来调用您的子组件，则必须将索引（或任何其他唯一标识符）放入 name 中，例如：

[name]="'address_' + i"

如果你想将你的表单组织成 FormGroups，你可以使用 ngModelGroup 和

viewProviders: [{ provide: ControlContainer, useExisting: NgModelGroup }]

而不是 ngForm 并添加 [ngModelGroup]="yourNameHere" 到一些包含标签的子组件 html 中。

Answer 3

使用最新版本的 Angular 2+，您可以将表单拆分为多个组件，而无需将 formGroup 实例作为输入传递给子组件。

您可以通过将此提供程序导入到您的子组件中来实现此目的：

viewProviders: [{provide: ControlContainer,useExisting: FormGroupDirective}]

然后您也可以通过注入 formGroupDirective 来访问主表单：

constructor(private readonly formGroupDirective: FormGroupDirective)

Answer 4

根据我的经验,使用模板驱动的表单很难形成这种表单字段组合.嵌套在地址组件中的字段不会在表单(NgForm.controls对象)中注册,因此在验证表单时不会考虑它们.

• 您可以使用所有验证创建ControlValueAccessor组件(接受ngModel属性),但是很难显示验证错误并传播更改(地址被视为具有复杂值的单个表单字段).
• 您可以将表单引用传递给Address组件并在其中注册您的内部控件,但我没有尝试过,似乎是一种奇怪的方法(我没有在任何地方看到它).
• 您可以切换到反应式表单(而不是模板驱动),将表单组对象(表示地址)传递到Address组件中,从而在表单定义中保留验证.你可以在这里看到一个例子https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2

Answer 5

我想分享在我的案例中完成工作的方法。我创建了以下指令：

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 检查