FormControlは

Question

私は、新しいコントロールを追加するためのformArray

とフォーム

let myForm=formBuilder.group({ 
    "firstName":[], 
    "subjects":formBuilder.array([]) 
}) 

//を持っている： -

(<FormArray>self.myForm.controls['subjects']).push(new FormControl()); 

//フォームをレンダリングするために： -

<div *ngFor="let control in myForm.controls['subjects'].controls;let i=index"> 
    <input formControlName="{{i}}" 
<div> 

私はフォームを提出すると、私は値オブジェクトを得ます： { "firstName"： "abc"、 "subjects"：["a"、 "b"] }

FormArrayでFormControlを作成して、対象のオブジェクトを取得できるようにすることはできますか？

Answer 1

フォームの値は、FormGroups、FormArrays、FormControlsで作成したオブジェクト構造に似ています。したがって、あなたのサブジェクトをオブジェクトにしたい場合は、あなたの 'サブジェクト'をフォームグループにバインドし、そのサブジェクトグループの各プロパティのフォームコントロールを持つようにする必要があります。

例えば、あなたはあなたの被写体が見えるようにしたい場合：その後、{ a: 'some value', b: 'some other value }：もちろん

<div *ngFor="let control in myForm.controls['subjects'].controls;let i=index"> 
    <div [formGroup]="control"> 
     <input formControlName="a" /> 
     <input formControlName="b" 
    </div> 
<div> 

これはあなたの件名FormControlArray上に新しいコントロールを押すと、あなたが同じを追加確保しなければならないことを意味

FormGroup構造ではなく、単一FormControl

編集：

あなたの主題はあなたがプロパティがarは何を知っていないことを意味し、動的オブジェクトであるので、 eの場合、formControlName = "a"は使用できません。その例では、 'a'は固定ストリングです。

しかし、あなたの代わりに変数にバインドすることができますので、あなたのような何かを行うことができます。

<div *ngFor="let control in myForm.controls['subjects'].controls;let i=index"> 
    <div [formGroup]="control"> 
     <input [formControlName]="firstProperty" /> 
     <input [formControlName]="secondProperty" 
    </div> 
<div> 

どこfirstPropertyとsecondPropertyは、文字列を含むコンポーネントでのメンバ変数ですが。次にfirstProperty = "x"とsecondProperty="y"の場合、件名は{ x: 'input value', y: 'other input value' }になります。

この機能を使用すると、創造的になり、さまざまなプロパティ名をインデックスに登録できるような配列に格納できます。そしてその方法で、あなたはあなたの動的なオブジェクトを手に入れます。

例えば、

コンポーネントで、

subjectFields = [ 
    { prop1: 'math', prop2: 'science' }, 
    { prop1: 'bio', prop2: 'chem' }, 
    .... 
] 

そしてテンプレート、

<div *ngFor="let control in myForm.controls['subjects'].controls;let i=index"> 
    <div [formGroup]="control"> 
     <input [formControlName]="subjectFields[i].prop1" /> 
     <input formControlName="subjectFields[i].prop1" /> 
     ...... 
    </div> 
<div> 

そして、あなたはなど、あなたの第一の主題は{ math: 'input val', science: 'input val 2' }さと第2 { bio: 'input val', chem: 'input val' }ことになってしまいます