angular - 如何在 Angular 6 中构建具有多个组件的表单？

Question

我正在尝试构建跨多个组件的 Reactive-Form，就像这样

<form [formGroup]="myForm" (ngSubmit)="onSubmitted()">
   <app-names></app-names>
   <app-address></app-address>
   <app-phones></app-phones>
   <button type="submit">Submit</button>
</form>

当我尝试提交时，我得到的是空对象。

Stackblitz Here

Answer 1

进行如下修改

1.只使用一个FormGroup，而不是为每个组件创建新的FormGroup。

2.你有 @Input 用于 FormGroup 但是你没有作为输入传递。

3.从子组件中移除FormBuilder。

app.component.html

<form [formGroup]="myForm" (ngSubmit)="onSubmitted()">
    <app-names [myForm]="myForm"></app-names>
    <app-address [myForm]="myForm"></app-address>
    <app-phones [myForm]="myForm"></app-phones>
    <button type="submit">Submit</button>
</form>

地址.component.ts

import { Component, OnInit, Input} from '@angular/core';
import { FormControl, FormGroup,FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-address',
  templateUrl: './address.component.html',
  styleUrls: ['./address.component.css']
})
export class AddressComponent implements OnInit {

  @Input() myForm: FormGroup;
  constructor(
    private formBuilder: FormBuilder
  ) { }

  ngOnInit() {
    this.myForm.addControl("homeAddress" , new FormControl());
    this.myForm.addControl("officeAddress" , new FormControl());
  }

}

对其他组件进行类似的更改。