angular - ERROR 错误:找不到带有路径的控件
问题描述
我是 Angular 的新手,并尝试从以下位置扩展示例代码:Angular 4 Form FormArray Add a Button to add or delete a form input row
如果在下拉列表中选择了某个选项,则该选项的新选项应该是可表达的。我到了这一点没有问题,但是为那些“较低层选项”实现 formControlName 标记给我一个错误:
ContentComponent.html:56 ERROR 错误:找不到带有路径的控件:'inhalt -> 0 -> optionsKey'(...)
.html 中的确切行是:(输入 formControlName="optionsKey" )
我在其他线程中查找了这些错误(Angular 2 Form "Cannot find control with path")或(Angular 2 Reactive Forms: Cannot find control with path)或(错误:Cannot find control with path: 'x' angular 2),但他们的问题是基于在没有 FormBuilder 的情况下创建 ReactiveForm-Components。我使用 Formbuilder 创建了所有 ReactiveForm-Components,您将在我的代码中看到它。
我是否可能错过了什么或做错了什么?
内容.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>
内容.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)。
解决方案
你需要告诉你的控件在数组组中
<div formArrayName="options">
<label >Key: </label>
<input formControlName="optionsKey" >
</div>
推荐阅读
- python - 使用python查找数据框中的缺失值
- javascript - 使用 Shopify API 请求在自定义网站上使用 JavaScript 获取所有产品
- ruby - 是否有内置方法来检查 #next 或 #peek 是否会引发 StopIteration?
- python - PythonteX Gallery 文件中 savefig() 的 PythonTeX (Python + Latex) 错误
- regex - Mac中的`grep`不使用RegEx返回带有美元符号的结果
- ruby-on-rails - 删除“朋友”的用户正在删除用户对象
- python - 在 UDF Pyspark 中更新变量值
- java - java spring jpa 使用 entityManager.clear() 时没有保存在 DB 表中
- sql - 在同一个 SELECT 中重用计算值
- lucene - 添加序列化程序时未创建 lucene 文档