角4 - 複数のフォームを持つフォーム - 提出データ

Question

私はアンギュラ4に新しいです。

私は3セクションを含むページがあります。基本情報

first name 
last name 
email 

セクション2 - - これらのセクションは、個々のフォーム

セクション1として作成された連絡先情報

address 
city 
state 
zip 

セクション3 - 注文情報

Order id 
Item name 
quantity 

これらのセクションは、異なるコンポーネントに分割された - BasicInfoComponent、ContactInfoComponent、 OrderInfoComponent。

ワンボタンでこれらのコンポーネントデータをすべて送信するにはどうすればいいですか？

Answer 1

これを行う方法はいくつかあります。コンポーネントの相互作用に関する角度のあるドキュメントは、https://angular.io/guide/component-interaction でご覧になれます。簡単な方法の1つは、ViewChildを使用することです。

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

ボタンをクリックすると、それらの子コンポーネントのデータにアクセスできます。

Answer 2

モデル駆動型の場合、これは非常に簡単に実現できます。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 {}