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

前端之家收集整理的这篇文章主要介绍了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,表单字段中的更改将被父级捕获!

猜你在找的Angularjs相关文章