數組中的Angular 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"
      }
    ]
  }
}

我想更改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作為嵌套的表單組嵌套在表單組中，因此它看起來像這樣：

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>

演示

如果不需要維護，當然可以從測試中提取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]
  })    
}