Angular 4 - 具有多个组件的表单 - 提交数据答案

【问题标题】：Angular 4 - Form with multiple components - Submit dataAngular 4 - 具有多个组件的表单 - 提交数据
【发布时间】：2017-12-26 13:01:51
【问题描述】：

我是 Angular 4 的新手。

我有一个包含 3 个部分的页面。这些部分被创建为单独的表单

第 1 节 - 基本信息

first name
last name
email

第 2 节 - 联系信息

address
city
state
zip

第 3 部分 - 订单信息

Order id
Item name
quantity

这些部分分为不同的组件 - BasicInfoComponent、ContactInfoComponent、OrderInfoComponent。

如何通过单击按钮提交所有这些组件数据？

【问题讨论】：

标签： javascript angular angular4-forms

【解决方案1】：

通过模型驱动的形式，这可以很容易地实现。我在Demo创建了一个简单的应用程序。

//our root app component
import {Component, NgModule, Input} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { FormBuilder, FormGroup, Validators, FormArray, FormControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `

    <h3>Nested FormGroup</h3>

    <form [formGroup]="myForm">
      <label>Name: </label>
      <input formControlName="name" />
      <app-child [address]="myForm.controls.address"></app-child>
    </form>
    <br>
    <pre>Form Values: {{myForm.value | json}}</pre>
  `,
})
export class App {

  myForm: FormGroup

  constructor(private fb: FormBuilder) {}

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


}

@Component({
  selector: 'app-child',
  template: `

    <div [formGroup]="address">
    <label>Street: </label>
      <input formControlName="street"><br>
    <label>Zip: </label>
      <input formControlName="zip">
    </div>

  `,
})
export class AppChild {

  @Input() address: FormGroup;

}

@NgModule({
  imports: [ BrowserModule, FormsModule, ReactiveFormsModule ],
  declarations: [ App, AppChild ],
  bootstrap: [ App ]
})
export class AppModule {}

【讨论】：

太棒了。这是堆栈闪电战stackblitz.com/edit/nested-form-group
从父组件收到以下错误：错误：“ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。以前的值：'ng-valid:false'。当前值：'ng-valid:true' 。”

【解决方案2】：

有不同的方法可以做到这一点。您可以在https://angular.io/guide/component-interaction 看到有关组件交互的 Angular 文档在您的情况下，一种简单的方法是使用 ViewChild。

 @ViewChild(BasicInfoComponent)
  private basicInfoComponent: BasicInfoComponent;
 @ViewChild(ContactInfoComponent)
  private contactComponent: ContactInfoComponent;
 @ViewChild(OrderInfoComponent)
  private orderComponent: OrderInfoComponent;

然后在按钮单击中，您可以访问那些子组件中的数据。

【讨论】：