角2は配列内のネストされたオブジェクトを作成します

Question

角度のあるフォームの配列のネストされたオブジェクトを調べようとしています。私はいくつかの質問と投稿を読んだが、まだそれを理解することはできない。たぶん私は何か非常に単純なものを見逃しているだけです。

下記の簡略化されたコードを参照してください。

HTML

<form [formGroup]="userForm" (ngSubmit)="submit(userForm.value)"> 
    <hr> 
    <div formGroupName="type"> 
     <div formArrayName="options"> 
      <div *ngFor="let child of userForm.controls.type.controls.options.controls; let i = index" > 
       <div formGroupName="{{i}}"> 
        <label>{{i+1}}. Test: </label> 
        <input formControlName="test" /><br> 
        <label>{{i+1}}. Label: </label> 
        <input formControlName="label" /><br> 
        <label>{{i+1}}. Value: </label> 
        <input formControlName="value" /> 
       </div> 
      </div> 
     </div> 
    </div> 
    <button type="submit">Submit</button> 
</form> 
<br> 
<pre>{{userForm.value | json }}</pre> 

アプリケーション私の出力は次のようになります

export class App { 
    name:string; 
    userForm: FormGroup; 
    fields: any; 

    ngOnInit() { 
    this.fields = { 
     isRequired: true, 
     type: { 
     options: [ 
      { 
      test { 
       name: 'test1' 
      } 
      label: 'Option 1', 
      value: '1', 
      }, 
      { 
      test { 
       name: 'test2' 
      } 
      label: 'Option 2', 
      value: '2' 
      } 
     ] 
     } 
    }; 
    this.userForm = this.fb.group({ 
     type: this.fb.group({ 
     options: this.fb.array([]) 
     }) 
    }); 
    this.patch() 
    } 

    submit(value) { 
    console.log(value); 
    } 

    constructor(private fb: FormBuilder) { } 

    patch() { 
    const control = <FormArray>this.userForm.controls.type.controls['options']; 
    this.fields.type.options.forEach(x => { 
     control.push(this.patchValues(x.label, x.value)) 
    }) 
    } 

    patchValues(label, value) { 
    return this.fb.group({ 
     test: {name: "HELP"}, 
     label: [label], 
     value: [value] 
    })  
    } 

} 

...

1. Test: [object Object] 
1. Label: Option 1 
1. Value: 1 
2. Test: [object Object] 
2. Label: Option 2 
2. Value: 2 

    [Submit] 

とデータオブジェクトが

{ 
    "type": { 
    "options": [ 
     { 
     "test": { 
      "name": "HELP" 
     }, 
     "label": "Option 1", 
     "value": "1" 
     }, 
     { 
     "test": { 
      "name": "HELP" 
     }, 
     "label": "Option 2", 
     "value": "2" 
     } 
    ] 
    } 
} 

です10

私はテストオブジェクトの代わりにtest.nameを表示するようにhtmlテンプレートを変更しようとしています。私はフォームを正しく初期化しているのですか、あるいはhtmlコードからフィールドを間違って呼び出していますか？ formControlName = "test"をformControlName = "test.name"に変更すると、test.nameが存在しないことを示すエラーになります。

所望の出力次を変更する必要があなたのコードで...

1. Test: HELP 
1. Label: Option 1 
1. Value: 1 
2. Test: HELP 
2. Label: Option 2 
2. Value: 2 

Answer 1

：

patchValues(label, value) { 
    return this.fb.group({ 
     **test: {name: "HELP"},** 
     label: [label], 
     value: [value] 
    })  
    } 

左側のすべての名前がformControlNamesです。そのため、form.ControlNameとして存在しないため、test.nameを使用しようとするとエラーが発生します。

あなたが達成しようとしていることは、ダイナミックフォームに似ていると思います。あなたは、元のデータの蓄積を維持する必要がある場合は、あなたがあなたのformgroup内部にネストされたformgroupとして巣あなたのtestに必要 https://angular.io/guide/dynamic-form

Answer 2

それは見ることができるので、：それは実装に役立つだろうとして、次のリンクを参照してください。このように：

this.fields.type.options.forEach(x => { 
    control.push(this.patchValues(x)) 
}) 

patchValues(x) { 
    return this.fb.group({ 
    // nested group! 
    test: this.fb.group({ 
     name: [x.test.name] 
    }), 
    label: [x.label], 
    value: [x.value] 
    }) 
} 

とテンプレートを次のようになります。

<div formGroupName="{{i}}"> 
    <div formGroupName="test"> 
    <label>{{i+1}}. Test: </label> 
    <input formControlName="name" /><br>   
    </div> 
    <label>{{i+1}}. Label: </label> 
    <input formControlName="label" /><br> 
    <label>{{i+1}}. Value: </label> 
    <input formControlName="value" /> 
    </div> 

DEMO

それを維持する必要がない場合は、もちろんだけではなく、そのようにテストからnameを抽出することができます。

control.push(this.patchValues(x.label, x.value, x.test.name)) 

patchValues(label, value, name) { 
    return this.fb.group({ 
    test: [name], 
    label: [label], 
    value: [value] 
    })  
} 

を