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

【问题标题】：Angular 5 FormArray > Cannot find control with path: 'fields -> 0 -> name'Angular 5 FormArray > 找不到带有路径的控件：'fields -> 0 -> name'
【发布时间】：2018-05-16 17:44:48
【问题描述】：

所以这是我从外部 API 获取对象并尝试绑定到表单的问题。该对象的结构与在 console.log() 打印中可以看到的结构相同，因为我对 FormControl 值使用相同的结构。

form.value的console.log()的PrtScn

前几个属性“ctk”、“tag”和“directacess”工作正常，但是当我们到达 FormArray 的“fields”时，问题就出现了，我们得到了前面提到的错误：

这发生在 FormArray 字段的每个元素中。但是，它确实会遍历正确的数组长度。下面是 concept-template-edit-component.ts 和 .html 的代码。（sn-p 只是为了方便）

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>

concept-template-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 的方法。

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

【问题讨论】：

键入而不是 tyoe
@ritaj 我在撤消一些更改时一定拼错了，但仍然不是问题。但是谢谢你的位置。（编辑：固定）
用let control = this.formBuilder.group替换let control = new FormControl
@yurzui 谢谢。我不敢相信我错过了这个。

标签： angular angular5

【解决方案1】：

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

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

谢谢你yurzui。

【讨论】：