角5 FormArray >找不到路径控制：‘字段-> 0 ->名称’

Question

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

PrtScn of console.log() of form.value

​

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

​

​

在字段FormArray的每个元素中，我都会想到这一点。然而，它确实迭代了正确的数组长度。Bellow是概念模板编辑组件和.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>

​

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的方法造成的。

编辑：-修正了可能引起混淆的类型错误拼写。

Answer 1

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

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

谢谢你，尤祖伊。