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

Question

我是新手 angular 4.

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

第 1 部分 - 基本信息

first name
last name
email

第 2 部分 - 联系信息

address
city
state
zip

第 3 部分 - 订单信息

Order id
Item name
quantity

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

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

Answer 1

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

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

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

Answer 2

使用模型驱动的形式可以很好地实现这一点 easily.I 在 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 {}

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

Angular 4 - Form with multiple components - Submit data

javascript

angular

angular4-forms