使用验证将表单分成多个组件 [英] Dividing a form into multiple components with validation

问题描述

我想创建一个带有 angular 2 的大表单.但我想创建具有多个组件的表单，如下例所示.

应用组件

<div><地址></地址>

<div><input type="text" 需要ngModel/>

<input type="submit" [disabled]="!form1.form.valid" ></表单>

地址组件

<input type="text" 需要ngModel/>

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

解决方案

我会使用一种效果很好的反应式表单，至于您的评论:

<块引用>

这个还有其他简单的例子吗?也许没有循环的同一个例子

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

假设您的表单如下所示，并且您想将 address 表单组传递给 child:

ngOnInit() {this.myForm = this.fb.group({姓名: ['']，地址:this.fb.group({//创建嵌套表单组传递给子街道: ['']，压缩: ['']})})}

然后在您的父级中，只需传递嵌套的表单组:

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

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

@Input() 地址:FormGroup；

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

<input formControlName="street"><input formControlName="zip">

如果您不想创建实际的嵌套表单组，则不需要这样做，您可以将父表单传递给子表单，因此如果您的表单如下所示:

this.myForm = this.fb.group({姓名: ['']，街道: ['']，压缩: ['']})

你可以传递任何你想要的控件.使用与上面相同的示例，我们只想显示 street 和 zip，子组件保持不变，但模板中的子标记将如下所示:

<address [address]="myForm"></address>

这是一个

演示 第一个选项，这是第二个 Demo

更多信息这里 关于嵌套的模型驱动表单.

I want to create a single big form with angular 2. But I want to create this form with multiple components as the following example shows.

App component

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

Address component

<div>
<input type="text" ngModel required/> </div>

When I use the code above it was visible in the browser as i needed but the submit button was not disabled when I delete the text in address component.
But the button was disabled correctly when I delete the text in input box in app component.

解决方案

I would use a reactive form which works quite nicely, and as to your comment:

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

I can give you an example. All you need to do, is to nest a FormGroup and pass that on to the child.

Let's say your form looks like this, and you want to pass address formgroup to child:

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

Then in your parent, just pass the nested formgroup:

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

In your child, use @Input for the nested formgroup:

@Input() address: FormGroup;

And in your template use [formGroup]:

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

If you do not want to create an actual nested formgroup, you don't need to do that, you can just then pass the parent form to the child, so if your form looks like:

this.myForm = this.fb.group({
  name: [''],
  street: [''],
  zip: ['']
})

you can pass whatever controls you want. Using the same example as above, we would only like to show street and zip, the child component stays the same, but the child tag in template would then look like:

<address [address]="myForm"></address>

Here's a

Demo of first option, here's the second Demo

More info here about nested model-driven forms.

这篇关于使用验证将表单分成多个组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！