问题描述:
在Angular 9中,当有多个formGroupName具有相同的名称,并且这些formGroupName下具有相同名称的formControlName时,会影响相同的formControlName。
解决方法:
在Angular中,可以使用FormBuilder来创建表单。在创建表单时,可以使用formGroupName和formControlName来组织表单控件的结构。
要解决上述问题,可以使用FormControl来代替formControlName。通过手动创建FormControl对象,可以确保每个formGroupName下的FormControl是唯一的。
以下是解决方法的代码示例:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
form: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.form = this.formBuilder.group({
group1: this.formBuilder.group({
control1: new FormControl(''),
}),
group2: this.formBuilder.group({
control1: new FormControl(''),
})
});
}
}
在上述代码中,我们使用FormControl来手动创建每个formGroupName下的控件,确保了每个控件的唯一性。这样就可以避免不同的formGroupName影响到相同的formControlName。
希望以上解决方法对你有所帮助!