angular - 嵌套的反应形式 - 错误错误:找不到带有路径的控件
问题描述
我无法弄清楚我在这里做错了什么。我不断收到:错误错误:找不到带有路径的控件:'属性-> 2-> SelectOptions-> Url'。
我搜索了类似的问题,但我找不到问题所在
HTML:
<form [formGroup]="configForm" style="overflow: auto;">
<div class="center">
<mat-form-field appearance="outline" class="input-field">
<mat-label>Display name</mat-label>
<input formControlName="DisplayName" matInput>
</mat-form-field>
<h3 style="margin: 0;">Properties:</h3>
<div formArrayName="Properties" *ngFor="let item of properties.controls; let i = index;" class="outline-inputs">
<div [formGroupName]="i">
<mat-form-field class="input-field">
<mat-label>ID</mat-label>
<input formControlName="Id" matInput>
</mat-form-field>
<ng-container *ngIf="item.get('SelectOptions')?.value">
<div formGroupName="SelectOptions">
<h3 style="margin: 0;">Select options:</h3>
<mat-form-field class="input-field">
<mat-label>Url</mat-label>
<input formControlName="Url" matInput>
</mat-form-field>
</div>
</ng-container>
</div>
</div>
</div>
</form>
这就是我创建表单 .ts 的方式:
get properties() { return this.configForm.controls.Properties as FormArray; }
configData(data: ConfigurationType){
this.configForm.get("DisplayName").setValue(data.DisplayName);
for (const item of data.Properties) {
if( item.SelectOptions ){
this.properties.push(this.formBuilder.group({
Id: [item.Id, Validators.required]
SelectOptions: [this.formBuilder.group({
Url: [item.SelectOptions.Url, Validators.required]
})]
}))
} else {
this.properties.push(this.formBuilder.group({
Id: [item.Id, Validators.required]
}))
}
}
}
解决方案
一般来说,JSON 数组的每个元素都应该具有相同的结构。还有一个 FormArray。你尝试为每个元素创建一个具有不同结构的 FormArray。我建议您始终创建 formGroup,其值为 Url,例如字符串“null”(或“no-url”),并检查此值
for (const item of data.Properties) {
this.properties.push(this.formBuilder.group({
Id: [item.Id, Validators.required]
SelectOptions: [this.formBuilder.group({
Url: [item?.SelectOptions?item.SelectOptions.Url:'no-url',
Validators.required]
})]
}))
}
顺便说一句,我喜欢使用“get”方法而不是使用控件:
get properties() {
return this.configForm.get('Properties') as FormArray;
}
以及方式中的标签“formArrayName 和 formGroup”
<!--in a div the formArrayName-->
<div formArrayName="Properties">
<!--if the *ngFor the [formGroupName]="i"-->
<div *ngFor="let item of properties.controls; let i = index;"
[formGroupName]="i" class="outline-inputs">
...
<ng-container *ngIf="item.get('SelectOptions').value!='no-url'">
</ng-container>
<div >
</div>
推荐阅读
- javascript - 将带有 UTC 日期/时间的 JSON 扩展为工作日子条目
- javascript - 用逗号连接嵌套的单个属性
- python - 有什么方法可以在 Firestore DB 中存储“客户端对象”/实时侦听器?
- javascript - discord.js 机器人播放音频但没有声音?
- java - Spring-Boot 项目在 IDE 中执行,但在 JAR 中不执行
- python - numpy argsort 性能缓慢
- git - 团队对 github 中 git repos 的特定权限
- html - 如何在页面上居中整个 div 和 form 元素
- html - 粘性内部 div 调整大小以填充窗口
- tableau-desktop - 员工层次结构的 Tableau 公式字段