ERROR 错误：找不到带有路径的控件

Posted 2023-03-13

【中文标题】ERROR 错误：找不到带有路径的控件

【英文标题】：ERROR Error: Cannot find control with path

【发布时间】：2018-12-05 08:38:50

【问题描述】：

我是 Angular 新手，并尝试从以下位置扩展示例代码：Angular 4 Form FormArray Add a Button to add or delete a form input row

如果在下拉列表中选择了某个选项，则该选项的新选项应该是可表达的。我到这一步没有问题，但是为那些“低层选项”实现 formControlName 标记给我一个错误：

ContentComponent.html:56 ：'inhalt -> 0 -> optionsKey'(...)

.html 中的确切行是： (input formControlName="optionsKey" )

我在其他线程 (Angular 2 Form "Cannot find control with path") 或 (Angular 2 Reactive Forms: Cannot find control with path) 或 (Error: Cannot find control with path: 'x ' angular 2) 中查找了这些错误，但它们的问题是基于在没有 FormBuilder 的情况下创建 ReactiveForm-Components。我使用 Formbuilder 创建了所有 ReactiveForm-Components，您将在我的代码中看到。

我是不是错过了什么或者做错了什么？

content.html

<h3 class="page-header">Formular-Abschnitt hinzufügen</h3>
<button type="button" (click)="addNewFormControl()" class="btn btn-primary">Neues Formularelement</button><br>
<form [formGroup]="formContent">
  <div>
    <label>Bezeichnung des Abschnittes</label>
    <input formControlName="absatz">
  </div>
  <div formArrayName="inhalt">

    <!--
    In the template we are iterating this formarray,
        and that is just the path to the formarray, which is:

        invoiceForm.controls.itemRows.controls

        'invoiceForm' being the complete form object, 'controls' being the content of the form object,
        'itemRows' being the (form)array in the form, 'controls' being the content of the formarray.

    -->

    <div *ngFor="let itemrow of formContent.controls.inhalt.controls; let i=index" [formGroupName]="i">
      <h4>Formular-Element # i + 1 </h4>
      <div class="form-group">
        <label>Element-Name</label>
        <input formControlName="label" class="form-control">
      </div>
      <div class="form-group">
        <label>Element-Key</label>
        <input formControlName="key" class="form-control">
      </div>
      <div class="form-group">
        <label>Element-zwingend notwendig?</label>
        <input type="checkbox" formControlName="required" class="form-control">
      </div>
      <div class="form-group">
        <label>Element-Position</label>
        <input formControlName="order" class="form-control">
      </div>
      <div class="form-group">
        <label>Element-Art</label>
        <select formControlName="controlType" class="form-control">
          <option>InputField</option>
          <option>Checkbox</option>
          <option>Radiobutton</option>
          <option>Dropdown</option>
          <option>Beschreibungstext</option>
        </select>
        <div [ngSwitch]="formContent.value.inhalt[i].controlType">
          <div *ngSwitchCase="'Checkbox'">
            <h3>Optionen definieren:</h3>
            <button (click)="addFormControlOptions()">Neue Option hinzufügen</button>
            <div *ngFor="let test of itemrow.controls.options.controls; let x = index" >
              test.controls.optionsKey.value
              <div>
                <label >Key: </label>
                <input formControlName="optionsKey" >
              </div>
              <div>
                <label>Value: </label>
                <input>
              </div>
              <button (click)="deleteFormControlOptions(x)">Option entfernen</button>
            </div>



          </div>
          <div *ngSwitchCase="''">
            <p>lololololo</p>
          </div>
          <div *ngSwitchDefault="">
            <p>DEFAULT</p>
          </div>
        </div>


      </div>
      <button *ngIf="formContent.controls.inhalt.controls.length > 1" (click)="deleteFormControl(i)"
              class="btn btn-danger">Delete Button
      </button>
    </div>
  </div>

</form>
<!--<pre>formContent.value | json</pre>-->
<button type="submit" (click)="saveData()">Formular-Abschnitt speichern</button>

content.ts

import  Component, OnInit  from '@angular/core';
import Form, FormArray, FormBuilder, FormGroup from '@angular/forms';
import isBoolean, isNumber from 'util';

@Component(
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.css']
)
export class ContentComponent implements OnInit 


  public formContent: FormGroup;
  absatz;

  constructor(private _fb: FormBuilder)  

  ngOnInit() 
    this.formContent = this._fb.group(
      absatz: '',
      inhalt: this._fb.array([this.initFormElements()])
    );
  
  initFormElements() 
    return this._fb.group(
      label: '',
      key: '',
      order: isNumber(),
      controlType: '',
      required: isBoolean(),
      options: this._fb.array([this.initFormElementOptions()])
    );
  
  initFormElementOptions() 
    return this._fb.group(
      optionsKey: '',
      optionsValue: ''
    );
  
  addNewFormControl() 
    const control = <FormArray>this.formContent.controls['inhalt'];
    control.push(this.initFormElements());
  
  deleteFormControl(index: number) 
    const control = <FormArray>this.formContent.controls['inhalt'];
    control.removeAt(index);
  

  saveData() 

    return this.formContent.value;
  
   addFormControlOptions() 
   // const control = <FormArray>this.formContent.controls['inhalt'].controls[0].options;
   // control.push(this.initFormElementOptions());
   
   deleteFormControlOptions(index: number) 
     const control = <FormArray>this.formContent.controls['inhalt'].value[0].options;
     control.removeAt(index);
   

Plunker： https://embed.plnkr.co/LIcp9vpGDCAWH9qZacQT/

提前致谢！

更新： 我需要为我的 SwitchCase 添加一个 formArrayName="options" 并为 ngFor-Div 添加一个 formGroupName="x"（我使用 ngFor 的索引 x）。

【参考方案1】：

你需要告诉你的控件在数组组中

         <div formArrayName="options">
            <label >Key: </label>
            <input formControlName="optionsKey" >
          </div>

【讨论】：

是的，在 5 分钟前也注意到了这一点。我为我的开关柜添加了 formArrayName，但这也应该可以。我还需要为我的 ngFor-div 放置一个 formGroupName。但感谢您的帮助。

【参考方案2】：

<ng-container formArrayName="options" 
 *ngFor="let eachOptions of myFormGroup.get('options')['controls']; let i=index">
       <tr [formGroupName]="i">
           <td>
               <input type="text" formControlName="heatNo">
           </td>


        </tr>
</ng-container>

【讨论】：

请描述你的答案。应该对解决方案有一个口头表达的想法。