angular - Angular 5 FormArray>找不到带有路径的控件:“字段-> 0->名称”

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

form.value的console.log（）的PrtScn


前几个属性“ ctk”，“ tag”和“ directacess”可以正常工作，但是当我们到达“字段” FormArray并遇到上述错误时，问题就来了：



我在FormArray字段的每个元素中都遇到这种情况。但是，它确实遍历了正确的数组长度。波纹管是concept-template-edit-component.ts和.html的代码。 （仅为方便起见，摘要）

concept-template-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>

概念模板编辑.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的方法引起的。

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

最佳答案

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

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

谢谢你yurzui。