Angular 5 FormArray>找不到带路径的控件：'fields - > 0 - > name'

Question

所以这里是我有一个对象的问题，我从外部API获取并尝试绑定到表单。该对象具有与console.log（）打印中相同的结构，因为我使用与FormControl值相同的结构。

form.value 的console.log（）的PrtScn

前几个属性“ctk”，“tag”和“directacess”工作正常，但是当我们到达FormArray的“字段”时我们得到前面提到的错误：

在FormArray字段的每个元素中都会出现这种情况。但它会通过正确的数组长度迭代。 Bellow是concept-template-edit-component.ts和.html的代码。 （仅为方便起见）

概念模板edit.component.html

<div class="container">
  <h2>Concept Template Form</h2>
  <form *ngIf="template | async; else loading" [formGroup]="form" (ngSubmit)="submit()">
    <label for="ctk">CTK</label>
    <input id="ctk" formControlName="ctk" disabled="true" />
    <br>

    <label for="tag">Tag</label>
    <input id="tag" formControlName="tag" />
    <br>

    <label for="directaccess">Direct Access</label>
    <input type="checkbox" id="directaccess" formControlName="directaccess" />
    <br>


    <div formArrayName="fields">
      <div *ngFor="let field of form.controls.fields.controls; let i = index">
        <div class="form-group" formGroupName="{{i}}">
          <input class="editor-field" [attr.id]="name + i" formControlName="name" />
          <input class="editor-field" [attr.id]="type + i" formControlName="type" />
          <input class="editor-field" [attr.id]="value + i" formControlName="value" />
        </div>
      </div>
    </div>
    <button type="button" class="btn btn-primary" style="width: 100%" href="#">
      <i class="fas fa-plus-square"></i>
      Add New Field
    </button>

    <button class="btn btn-primary">
      <i class="fas fa-edit"></i>
      Update
    </button>
  </form>

  <ng-template #loading>
    Loading form...
  </ng-template>
</div>

概念模板edit.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ComponentrestService } from '../../componentrest.service';
import { ConceptTemplate } from '../../model/template';
import { Observable } from 'rxjs/Observable';
import { tap } from 'rxjs/operators';
import { FormGroup, FormBuilder, Validators, FormControl, FormArray } from '@angular/forms';

@Component({
  selector: 'app-concept-template-edit',
  templateUrl: './concept-template-edit.component.html',
  styleUrls: ['./concept-template-edit.component.css']
})

export class ConceptTemplateEditComponent implements OnInit {
  private form: FormGroup;
  private ctk: Number;
  private sub: any;
  private template: Observable<ConceptTemplate>;

  constructor(private route: ActivatedRoute,
    private crs: ComponentrestService,
    private formBuilder: FormBuilder) {
  }


  private templateCC: {

  }

  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
      this.ctk = +params['ctk'];
      this.template = this.crs.getConceptTemplate(this.ctk).pipe(
        tap(template => {
          let fieldscontrol = new FormArray([]);
          template.fields.forEach(field => {
            let control = new FormControl({
              name: ['', Validators.required],
              type: ['', Validators.required],
              value: ['', Validators.required]
            })
            control.patchValue(field);
            fieldscontrol.push(control);
          })
          this.form = this.formBuilder.group({
            ctk: ['', Validators.required],
            tag: ['', Validators.required],
            directaccess: ['', Validators.required],
            fields: fieldscontrol,
            trigger: ['', Validators.required]
          })
          this.form.patchValue({
            ctk: template.ctk,
            tag: template.tag,
            directaccess: template.directaccess
          });
          console.log(this.form.value)
        })
      );

    })
  }

  submit() {
    if (this.form.valid) {
      console.log(this.form.value);
    }
  }

}

我认为我的问题与.html有关但是我不能确定它不是由于我用来制作FormControl的方法。

编辑： - 修复了可能导致混淆的类型拼写错误。

Answer 1

正如评论中所回答的那样，当我应该使用this.formBuilder.group时，我试图创建一个FormControl是一个简单的问题。

它们都产生类似的值对象，但是简单的FormControl对象没有适当的方法来解析路径。

谢谢yurzui。