angular - 角度嵌套表单数组映射问题
问题描述
我正在嵌套 2 个表单数组,不幸的是我收到了这个错误:
Cannot find control with path: 'answers -> affectedCategories'
我正在使用角度反应形式,在我盯着嵌套形式数组之前这些形式都可以。
TS 文件:
public questionForm: FormGroup;
get answers(): FormArray {
return this.questionForm.get('answers') as FormArray;
}
public getAffectedCategories(i: number): FormArray {
const group = this.answers.at(i);
return group.get('affectedCategories') as FormArray;
}
constructor(private store: Store<{}>, private formBuilder: FormBuilder) {
}
ngOnInit(): void {
this.questionForm = this.formBuilder.group({
description: [null, Validators.required],
predecessorId: [null, Validators.required],
answers: this.formBuilder.array([]),
isHidden: this.formBuilder.array([])
});
this.createAnswer();
}
public createAnswer(): void {
this.answers.push(this.formBuilder.group({
description: [null, Validators.required],
affectedCategories: this.formBuilder.array([this.formBuilder.group({
category: [null, Validators.required],
weight: [null, Validators.required]
})])
}));
}
public createAffectedCategory(i: number): void {
this.getAffectedCategories(i).push(this.formBuilder.group({
category: [null, Validators.required],
weight: [null, Validators.required]
}));
}
HTML 文件:
<form [formGroup]="questionForm" (ngSubmit)="addQuestion()">
<label>
Question Text
<input type="text" formControlName="description">
</label>
<label>
Predecessor
<select formControlName="predecessorId">
<option [ngValue]="null" disabled>Choose predecessor</option>
<option *ngFor="let question of questions$ | async" [ngValue]="question.id">{{question.description}}</option>
</select>
</label>
<ng-container formArrayName="answers">
<div *ngFor="let answer of answers.controls; index as i">
<ng-container [formGroupName]="i">
<label>
Description
<input type="text" formControlName="description">
</label>
</ng-container>
<button (click)="createAffectedCategory(i)" type="button">add affected category</button>
这是我遇到问题的代码部分:
<ng-container formArrayName="affectedCategories">
<div *ngFor="let __ of getAffectedCategories(i).controls; index as y">
<ng-container [formGroupName]="y">
<label>
Category
<input type="text" formControlName="category">
</label>
<label>
Weight
<input type="text" formControlName="weight">
</label>
</ng-container>
</div>
</ng-container>
</div>
<button (click)="createAnswer()" type="button">Add Answer</button>
</ng-container>
<button type="submit">Send form</button>
</form>
我正在重复与第一个“外部”循环相同的代码,这很奇怪,因为在 ts 文件中它看起来不错,有人可以建议吗?
解决方案
从你的 ts 可以看出 path 不应该是'answers -> affectedCategories'
but 'answers -> ${i} -> affectedCategories'
。要使您的模板搜索该路径,您应该将 element<ng-container formArrayName="affectedCategories">
放入 element <ng-container [formGroupName]="i">
。
推荐阅读
- python - 如何在保留缺失日期的同时使用重采样
- macos - 如何在 Mac 终端中创建别名?
- flutter - 图像无法使用 WP REST API 在 Flutter App 上加载 Wordpress Post & Display
- cmake - set(CMAKE_CXX_COMPILER g++) 添加子目录时出错
- javascript - 如何覆盖owl Odoo 14中的现有组件/每次在Odoo 14中查看时触发点击功能
- android - 类型不匹配:推断类型是 HomeViewModel!但是视图模型!预计
- curl - 使用 CURL 的 Websocket 连接
- node.js - React 源代码更改未反映在浏览器 DOM 中
- r - R:提取具有NA的行,删除那些满足条件A并取那些满足条件B的平均值
- wordpress - 在 WordPress 博客上添加可选择的阅读障碍字体