如何解决角度嵌套表单数组映射问题
我正在嵌套 2 个表单数组,但不幸的是我收到此错误:
Cannot find control with path: 'answers -> affectedCategories'
我正在使用 angular 反应形式,在我盯着嵌套形式数组之前,这些形式还可以。
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,answers: this.formBuilder.array([]),isHidden: this.formBuilder.array([])
});
this.createAnswer();
}
public createAnswer(): void {
this.answers.push(this.formBuilder.group({
description: [null,affectedCategories: this.formBuilder.array([this.formBuilder.group({
category: [null,weight: [null,Validators.required]
})])
}));
}
public createAffectedCategory(i: number): void {
this.getAffectedCategories(i).push(this.formBuilder.group({
category: [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 可以看出路径应该不是 'answers -> affectedCategories'
而是 'answers -> ${i} -> affectedCategories'
。要使您的模板搜索该路径,您应该将元素 <ng-container formArrayName="affectedCategories">
放入元素 <ng-container [formGroupName]="i">
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。