ERROR 错误:找不到带有路径的控件 [英] ERROR Error: Cannot find control with path

查看：30
本文介绍了ERROR 错误:找不到带有路径的控件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是 Angular 的新手，并试图从以下位置扩展示例代码:Angular 4 Form FormArray 添加按钮添加或删除表单输入行

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

<块引用>

ContentComponent.html:56 ERROR 错误:找不到带有路径的控件:'inhalt ->0 ->optionsKey'(…)

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

我在其他线程中查找了这些错误(Angular 2 Form "找不到路径控制") 或 (Angular 2 Reactive Forms:找不到带有路径的控件)或(错误:找不到带有路径的控件:'x' angular 2)，但他们的问题是基于在没有 FormBuilder 的情况下创建 ReactiveForm-Components.我使用 Formbuilder 创建了所有的 ReactiveForm 组件，您将在我的代码中看到.

我可能错过了什么或做错了吗?

content.html

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

<div formArrayName="吸入"><!--在模板中我们迭代这个formarray，这只是formarray的路径，它是:invoiceForm.controls.itemRows.controls'invoiceForm' 是完整的表单对象，'controls' 是表单对象的内容，'itemRows' 是表单中的(表单)数组，'controls' 是表单数组的内容.--><div *ngFor="let itemrow of formContent.controls.inhalt.controls;让我=索引"[formGroupName]=i"><h4>公式元素#{{ i + 1 }}</h4><div class="form-group"><label>元素名称</label><input formControlName="label";class =表单控件">

<div class="form-group"><label>元素键</label><input formControlName="key";class =表单控件">

<div class="form-group"><label>Element-zwingend notwendig?</label><输入类型=复选框"formControlName=必填"；class =表单控件">

<div class="form-group"><label>元素位置</label><input formControlName="订单";class =表单控件">

<div class="form-group"><label>Element-Art</label><select formControlName="controlType";class =表单控件"><option>InputField</option><option>复选框</option><option>单选按钮</option><option>下拉菜单</option><option>Beschreibungstext</option></选择><div [ngSwitch]=formContent.value.inhalt[i].controlType"><div *ngSwitchCase="'复选框'"><h3>可选定义:</h3><按钮(点击)=addFormControlOptions()">Neue Option hinzufügen</button><div *ngFor="let test of itemrow.controls.options.controls;让 x = 索引">{{test.controls.optionsKey.value}}<div><label >键:</label><input formControlName="optionsKey";>

<div><label>值:</label><输入>

<按钮(点击)=deleteFormControlOptions(x)">选项输入</button>

<div *ngSwitchCase="''"><p>loolololo</p>

<div *ngSwitchDefault=""><p>默认</p>

<button *ngIf="formContent.controls.inhalt.controls.length >1"(click)="deleteFormControl(i)";class="btn btn-danger"> 删除按钮

</表单><!--<pre>{{formContent.value |json}}</pre>--><按钮类型=提交"(click)=saveData()">Formular-Abschnitt Speichern</button>

content.ts

import { Component, OnInit } from '@angular/core';从 '@angular/forms' 导入 {Form、FormArray、FormBuilder、FormGroup}；从 'util' 导入 {isBoolean, isNumber};@成分({选择器:'应用程序内容'，templateUrl: './content.component.html',styleUrls: ['./content.component.css']})导出类 ContentComponent 实现 OnInit {公共表单内容:FormGroup；absatz;构造函数(私有_fb:FormBuilder){}ngOnInit() {this.formContent = this._fb.group({absatz: '',吸入:this._fb.array([this.initFormElements()])});}initFormElements() {返回 this._fb.group({标签: ''，钥匙: ''，顺序:isNumber(),控制类型:'',需要:isBoolean(),选项:this._fb.array([this.initFormElementOptions()])});}initFormElementOptions() {返回 this._fb.group({选项键:'',选项值:''});}addNewFormControl() {const control = <FormArray>this.formContent.controls['inhalt'];control.push(this.initFormElements());}deleteFormControl(索引:数字){const control = <FormArray>this.formContent.controls['inhalt'];control.removeAt(index);}保存数据() {返回 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/

提前致谢！

更新:我需要添加一个 formArrayName="options"到我的 SwitchCase 和一个 formGroupName=x"(我使用了 ngFor 的索引 x)作为 ngFor-Div.

解决方案

你需要告诉你的控件进入数组组

 
<label >键:</label><input formControlName="optionsKey" >

I'm new to Angular and tried to extend the example code from: Angular 4 Form FormArray Add a Button to add or delete a form input row

If a certain option was picked in a dropdown, new options for that option should be expressable. I got to this point without problems, but implementing the formControlName Tags for those 'lower-tier-options' are throwing me an error:

ContentComponent.html:56 ERROR Error: Cannot find control with path: 'inhalt -> 0 -> optionsKey'(…)

the exact line in the .html is: (input formControlName="optionsKey" )

I looked for those errors in other threads(Angular 2 Form "Cannot find control with path") or (Angular 2 Reactive Forms: Cannot find control with path) or (Error: Cannot find control with path: 'x ' angular 2), but their problems are based on creating ReactiveForm-Components without the FormBuilder. I created all my ReactiveForm-Components with the Formbuilder, which you will see in my code.

Did I maybe miss something or am doing it the wrong way?

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/

Thanks in advance!

Update: I needed to add a formArrayName="options" to my SwitchCase and a formGroupName="x"(where I used the index x of the ngFor) for the ngFor-Div.

解决方案

you need tell your control is into array group

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

这篇关于ERROR 错误:找不到带有路径的控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆