如何解决Angular FormGroup:无法在 angular 11
我正在尝试根据要求动态生成表单,但它给出了一个错误,表明无法通过路径找到控件:
在这里,我根据该列表从 API 获取列表,我正在尝试动态生成复选框并将它们添加到表单组,但出现错误,请参阅下面的相同代码
这是组件的代码:
export class QualificationExpComponent implements OnInit {
jobmasterList: any = [];
checkboxform1: FormGroup;
public jobcount = 0;
constructor(private formBuilder: FormBuilder,private callapi: ServiceService,private _router: Router) { }
ngOnInit(): void {
this.addCheckboxes();
this.initializecheckboxform1();
this.callapi.getDetails().subscribe(res => {
if (res.data !== null) {
this.jobmasterList = res.data.jobs;
this.categoriesList = res.data.jobs[0].category;
this.subcatList = res.data.jobs[0].category[0].sub_category;
console.log(this.subcatList)
}
})
}
}
initializecheckboxform1() {
this.checkboxform1 = this.formBuilder.group({
orders: new FormArray([],this.minSelectedCheckboxes(1))
});
}
minSelectedCheckboxes(min = 1) {
const validator: ValidatorFn = (formArray: FormArray) => {
const totalSelected = formArray.controls
// get a list of checkbox values (boolean)
.map(control => control.value)
// total up the number of checked checkboxes
.reduce((prev,next) => next ? prev + next : prev,0);
// if the total is not greater than the minimum,return the error message
return totalSelected >= min ? null : { required: true };
};
return validator;
}
get ordersFormArray() {
return this.checkboxform1.controls.orders as FormArray;
}
private addCheckboxes() {
this.jobmasterList.forEach(() => this.ordersFormArray.push(new FormControl(false)));
}
get sf() {
return this.salaryexpForm.controls;
}
get rf() {
return this.remunerationForm.controls;
}
SelectePrevExperience() {
const selectedOrderIds = this.checkboxform1.value.orders
.map((v,i) => v ? this.jobmasterList[i].id : null)
.filter(v => v !== null);
console.log(selectedOrderIds);
console.log(this.checkboxform1.value);
}
checkboxform1submit() {
console.log(this.checkboxform1.value);
}
}
这是我试图绑定数据的 HTML 组件 表单控件名称:
<span formArrayName="orders" *ngFor="let master of jobmasterList; let i = index">
<div *ngIf="i === jobcount">
<span class="TextMaroonBold" style="color: #1c8bea;font-weight: bold;"> {{master.description}}
</span><br>
<span *ngFor="let order of master.category; let j = index">
<input type="text" value="{{order.category_id}}" [formControlName]="j" style="display: none;">
<span class="TextMaroonBold"> {{order.name}}
</span>
<div class="ex1">
<span *ngFor="let option of order.sub_category; let k = index" class="checkbox">
<div class="form-check" style="padding-left: 35px;">
<input type="checkbox" value="{{option.ref_id}}" [formControlName]="k">
{{option.name}}
</div>
</span>
</div>
</span>
</div>
</span>
在控制台中,我看到以下错误:
ERROR Error: Cannot find control with path: 'orders -> i'
解决方法
首先,您应该用 fromControlName
包围您的所有 []
属性,如Angular Binding Syntax 中所述:
<input type="checkbox" value="{{option.ref_id}}" [formControlName]="i">
其次,您的 HTML 中有嵌套循环,您必须为每个嵌套循环更改变量索引 i
:
<div *ngFor="...; let i = index">
<div *ngFor="...; let j = index"></div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。