Angular2動的に反応するフォームを生成する

Question

私にはコンセプトの質問があり、アドバイスが必要です。 私は、反応式であるコンポーネントmyFormArrayを持っています。入力配列を受け取り、それに応じていくつかのFormControlを作成します。

@Component({ 
selector: 'myFormArray', 
templateUrl: 'formarray.component.html' 
}) 

export class FormArrayComponent{ 
@Input() classFields: any[]; 

userForm = new FormGroup(); 

ngOnInit(){ 
// psuedocode here, but I know how to implement 
    for (# of entries in classFields) 
    userForm.FormArray.push(new FormControl()); 
} 

私の親のhtmlでは、私は動的に複数のmyFormArraysを生成します。それが混乱している場合は、私はこれをやっていると仮定します。

 <myFormArray [classFields] = "element.subArray"/> 
    <myFormArray [classFields] = "element2.subArray"/> 
    <button (click) = "save()"> //I don't know how to implement this! 

とページの最後に、私は、何とかすべてのフォームへのすべての値のユーザー入力をつかむことができ、保存ボタンを、したいですこのすべてのデータをServiceコンポーネントの配列にプッシュします。私はこの部分をどうやって行うのか正確にはわかりません。私は、動的に生成されたフォームコンポーネントごとに個別の送信ボタンを必要としないことに注意してください。

どのようにこの機能を実装しますか？ありがとう！

Answer 1

あなたのスタートは良いですが、ソースコードを別に書く必要があります。

app.components.tsの代わりに、my-array.component.tsが子コンポーネントです。

当社の試験データ

classFields1: any[] = ['firstname', 'lastname', 'email', 'password']; 
classFields2: any[] = ['country', 'city', 'street', 'zipcode']; 

ステップフォーム作成のための1. FormBuilder（app.component.ts）

あなたは、このよう@angular/formsからFormBuilderとFormGroupをインポートする必要があります。

import { FormBuilder, FormGroup } from '@angular/forms'; 

コンストラクタで：

ngOnInit() { 
    this.myForm = this.formBuilder.group({}); 
} 

ステップ3.（動的FormControlsを作成します。

constructor(private formBuilder: FormBuilder) { } 

ステップ2.今、あなたはこのようngOnInitに新しい空のFormGroupを定義することができますFormGrooup

新しい空の定義しますapp.component.ts）

これで、w動的にFormControlsを作成し、反復回数classFieldsで作成します。このため私は独自の関数を作成することをお勧めします。この関数は、2つのパラメータ：arrayNameとclassFieldsを取得します。 arrayNameを使用すると、FormArray -controlのカスタム名を設定できます。 classFields - 私たちは反復のために使用します。我々はと呼ばれる空のFormArrayの定数変数を作成します。その後、classFieldsを繰り返し、controlと呼ばれる各要素FormControlを作成し、controlをarrayControlsにプッシュします。この関数の最後にarrayNameを使用して、arrayControlsをフォームにカスタム名で追加します。

createDynamicArrayControls(arrayName: string, classFields: any[]) { 
    const defaultValue = null; 
    const arrayControls: FormArray = this.formBuilder.array([]); 
    classFields.forEach(classField => { 
     const control = this.formBuilder.control(defaultValue, Validators.required); 
     arrayControls.push(control); 
    }) 
    this.myForm.addControl(arrayName, arrayControls); 
    } 

インポートFormControlと@angular/formsからFormArray：ここでは一例です。あなたのインポート行は次のようにする必要があります：

import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms'; 

今ngOnInitでcreateDynamicFormControls -functionを呼び出します。このダイナミックなフォームのための

ステップ4 HTMLテンプレート（app.component.html）

この例では、私は次のテンプレートを作成：ここでは

<h1>My Form</h1> 
<form [formGroup]="myForm"> 
    <div formGroupName="test1"> 
    <app-my-array [classFields]="classFields1" [arrayFormName]="myForm.controls.test1"></app-my-array> 
    </div> 
    <div formGroupName="test2"> 
    <app-my-array [classFields]="classFields2" [arrayFormName]="myForm.controls.test2"></app-my-array> 
    </div> 
    <button type="button" (click)="saveForm()">Submit</button> 
</form> 

を我々はformGroupName持つ新しいdiv要素を持っています。このグループ名は、arrayNameという形式です。フォーム配列は@Inputからmy-array.componentになります。

ステップ5 MyArrayComponent

は今、このコンポーネントは非常にsimnpleです：ここでは

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

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

    @Input() classFields: any[]; 
    @Input() arrayFormName: FormGroup; 

    constructor() { } 

    ngOnInit() { } 

} 

我々は2つだけ@Input varibalesを持っています。 （私は知っている、この変数は良い名前を持つことができます:-)）。 MyArrayComponent

<div [formGroup]="arrayFormName"> 
    <div *ngFor="let class of arrayFormName.controls; let index = index;"> 
    <label [for]="classFields[index]">{{ classFields[index] }}</label> 
    <input type="text" [id]="classFields[index]" [formControlName]="index" /> 
    </div> 
</div> 
<br> 

そして、ここで用

ステップ6. HTMLはStackblitzに例を取り組んでいる：https://stackblitz.com/edit/angular-wawsja

あなたには、いくつかの質問はコメントで私に尋ねるか、反応性フォームabour角度のドキュメントを読んでいればhere 。