.forEach 不是 fromArray angular 上的函数
.forEach is not a function on fromArray angular
我正在处理一项要求,我必须循环通过 component.ts 文件中定义的 'formArray' 控件来设置表单提交时的验证。我收到类似“.forEach 不是函数”的错误 我的代码如下:
component.ts
ip_addresses_arr: any;
this.companyForm = this.fb.group({
company_ip_addresses: this.fb.array([this.fb.group({
id: 0,
start_ip: new FormControl('', Validators.pattern("^([0-9]{1,3})[.]([0-9]{1,3})[.]([0-9]{1,3})[.]([0-9]{1,3})$")),
end_ip: new FormControl('', Validators.pattern("^([0-9]{1,3})[.]([0-9]{1,3})[.]([0-9]{1,3})[.]([0-9]{1,3})$"))
})]),
});
我在 formArray 上的 forEachloop 是:
saveCompanyInfo() {
this.ip_addresses_arr = this.companyForm.get('company_ip_addresses');
this.ip_addresses_arr.forEach(eachfield => {
console.log("each field",this.ip_addresses_arr);
if(eachfield.start_ip != "" && eachfield.end_ip == ""){
console.log("coming inside end_ip is empty");
eachfield.end_ip.setErrors({'incorrect': true});
eachfield.end_ip.markAsTouched();
}else if(eachfield.end_ip != "" && eachfield.start_ip == ""){
console.log("coming inside start_ip is empty");
eachfield.start_ip.setErrors({'incorrect': true});
eachfield.start_ip.markAsTouched();
}else{
eachfield.start_ip.setErrors(null);
eachfield.end_ip.setErrors(null);
}
});
if (this.companyForm.valid) {
-----------------
-----------------
}
}
我的问题是它说 .forEach 不是函数。谁能解释一下代码中的错误。任何帮助,将不胜感激。谢谢
这实际上是一个 linting 问题,打字稿和编辑器抱怨这个,因为 formInstance.get('controlName')
returns 一个抽象控件。您必须告诉他们您收到的控件是一个 FormArray,您可以通过以下方式做到这一点:
this.ip_addresses_arr = this.companyForm.get('company_ip_addresses') as FormArray;
并且您需要将控件循环为。
this.ip_addresses_arr.controls.forEach()
并且您没有正确访问控件
saveCompanyInfo() {
this.ip_addresses_arr = this.companyForm.get('company_ip_addresses') as FormArray;
this.ip_addresses_arr.controls.forEach(eachfield => {
if(eachfield.get('start_ip').value != "" && eachfield.get('end_ip').value == ""){
console.log("coming inside end_ip is empty");
eachfield.get('end_ip').setErrors({'incorrect': true});
eachfield.get('end_ip').markAsTouched();
}else if(eachfield.get('end_ip').value != "" && eachfield.get('start_ip').value == ""){
console.log("coming inside start_ip is empty");
eachfield.get('start_ip').setErrors({'incorrect': true});
eachfield.get('start_ip').markAsTouched();
}else{
eachfield.get('start_ip').setErrors(null);
eachfield.get('end_ip').setErrors(null);
}
});
}
我正在处理一项要求,我必须循环通过 component.ts 文件中定义的 'formArray' 控件来设置表单提交时的验证。我收到类似“.forEach 不是函数”的错误 我的代码如下:
component.ts
ip_addresses_arr: any;
this.companyForm = this.fb.group({
company_ip_addresses: this.fb.array([this.fb.group({
id: 0,
start_ip: new FormControl('', Validators.pattern("^([0-9]{1,3})[.]([0-9]{1,3})[.]([0-9]{1,3})[.]([0-9]{1,3})$")),
end_ip: new FormControl('', Validators.pattern("^([0-9]{1,3})[.]([0-9]{1,3})[.]([0-9]{1,3})[.]([0-9]{1,3})$"))
})]),
});
我在 formArray 上的 forEachloop 是:
saveCompanyInfo() {
this.ip_addresses_arr = this.companyForm.get('company_ip_addresses');
this.ip_addresses_arr.forEach(eachfield => {
console.log("each field",this.ip_addresses_arr);
if(eachfield.start_ip != "" && eachfield.end_ip == ""){
console.log("coming inside end_ip is empty");
eachfield.end_ip.setErrors({'incorrect': true});
eachfield.end_ip.markAsTouched();
}else if(eachfield.end_ip != "" && eachfield.start_ip == ""){
console.log("coming inside start_ip is empty");
eachfield.start_ip.setErrors({'incorrect': true});
eachfield.start_ip.markAsTouched();
}else{
eachfield.start_ip.setErrors(null);
eachfield.end_ip.setErrors(null);
}
});
if (this.companyForm.valid) {
-----------------
-----------------
}
}
我的问题是它说 .forEach 不是函数。谁能解释一下代码中的错误。任何帮助,将不胜感激。谢谢
这实际上是一个 linting 问题,打字稿和编辑器抱怨这个,因为 formInstance.get('controlName')
returns 一个抽象控件。您必须告诉他们您收到的控件是一个 FormArray,您可以通过以下方式做到这一点:
this.ip_addresses_arr = this.companyForm.get('company_ip_addresses') as FormArray;
并且您需要将控件循环为。
this.ip_addresses_arr.controls.forEach()
并且您没有正确访问控件
saveCompanyInfo() {
this.ip_addresses_arr = this.companyForm.get('company_ip_addresses') as FormArray;
this.ip_addresses_arr.controls.forEach(eachfield => {
if(eachfield.get('start_ip').value != "" && eachfield.get('end_ip').value == ""){
console.log("coming inside end_ip is empty");
eachfield.get('end_ip').setErrors({'incorrect': true});
eachfield.get('end_ip').markAsTouched();
}else if(eachfield.get('end_ip').value != "" && eachfield.get('start_ip').value == ""){
console.log("coming inside start_ip is empty");
eachfield.get('start_ip').setErrors({'incorrect': true});
eachfield.get('start_ip').markAsTouched();
}else{
eachfield.get('start_ip').setErrors(null);
eachfield.get('end_ip').setErrors(null);
}
});
}