Question

我有一个工作表单，采用以下HTML标记。没有错误或警告。

<div class="input-element">
  <div class="input-caption">Title</div> 
    <input type="text"
           formControlName="targetField"
           class="form-control">
</div>

我将其转换为自定义组件，工作，如下所示。

<app-input-text [info]="'Title'"
                formControlName="targetField"
                ngDefaultControl></app-input-text>

在我的下一个视图中，我需要使用 FormArray ，如下所示 - 仍然是工作代码。

<div formArrayName="stuff">
  <div *ngFor="let thing of form.controls.stuff.controls; let i = index;"
       [formGroupName]=i>

    <div class="input-element">
      <div class="input-caption">Title</div>
        <input type="text"
               formControlName="targetField"
               class="form-control">
    </div>

  </div>
</div>

现在，我希望将两者结合起来（即能够使用自定义输入组件并能够为组件形成阵列）将没有问题。但是，下面的示例不起作用。

<div formArrayName="stuff">
  <div *ngFor="let thing of form.controls.stuff.controls; let i = index;"
       [formGroupName]=i>

    <app-input-text [info]="'Title'"
                    formControlName="targetField"
                    class="col-sm-6"></app-input-text>
  </div>
</div>

它会产生以下错误。

没有带路径的表单控件的值访问器：'stuff - ＆gt; 0 - ＆gt;标靶球场“

自定义组件的设计是这样的（尽管它在显式标记示例中有效，但我不确定它是否是相关信息）。我唯一（疯狂）猜测可能是value没有以某种方式插入到表单数组字段中。

export class InputTextComponent implements OnInit {
  constructor() { this.value = new EventEmitter<string>(); }
  @Input() info: string;
  @Output() value: EventEmitter<string>;
  onEdit(value: any): void { this.value.emit(value); }
}

在当前视图中创建的组和数组是这样完成的（不确定它是否与任何相关性都没有，因为它适用于显式HTML标记的情况）。

this.form = builder.group({
  id: "",
  stuff: builder.array([
    builder.group({ targetField: "aaa" }),
    builder.group({ targetField: "bbbb" }),
    builder.group({ targetField: "cc" })
  ])
});

Angular在这方面是否有限制，我不知道？我很确定没有，我只是在做一些相当聪明的事情，只是错过了一个小细节。

我确实理解错误，但我看不出它与代码的关系。表单找不到数组中的第0个元素，或者该元素没有该名称的字段。因为我确实看到了几行，所以我知道必须是第0个元素。由于我指定了字段的名称，我知道确实这样。我还缺少什么？

使用用于输入的自定义组件生成“没有用于路径X-> 0-> Y的表单控件的值访问器”

0 个答案: