Angular 2在陣列中嵌套的Ojects

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" 
     } 
    ] 
    } 
} 

我正在尋找更改html模板以顯示test.name而不是測試對象。我是否正確地初始化表單，或者我是否從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。這就是爲什麼當你嘗試使用test.name時，你會得到一個錯誤，因爲它不存在formControlName。

我認爲你正在努力實現的東西類似於動態表單。請參考下面的鏈接，因爲它會在執行幫助： https://angular.io/guide/dynamic-form

Answer 2

如果你需要保持原始數據的積累，你需要嵌套你test爲您formgroup內嵌套formgroup，所以它可以看看像這樣：

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] 
    })  
}