Question

我是角色4的新手。

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

第1节 - 基本信息

first name
last name
email

第2节 - 联系信息

address
city
state
zip

第3节 - 订单信息

Order id
Item name
quantity

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

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

Answer 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 {}

Answer 2

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

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

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

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

2 个答案: