在Angular 9中,表单组问题是一个常见的问题,特别是在处理动态表单时。下面是一个包含代码示例的解决方法:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css']
})
export class FormComponent {
formGroup: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.formGroup = this.formBuilder.group({
controls: this.formBuilder.array([])
});
}
addControl() {
const control = new FormControl('', Validators.required);
this.controls.push(control);
}
get controls() {
return this.formGroup.get('controls') as FormArray;
}
submitForm() {
// 处理表单提交逻辑
}
}
ngFor指令来动态显示表单控件:
formArrayName指令来引用我们在组件类中定义的表单组:
formBuilder来创建一个初始的表单组,并使用addControl()方法来动态地添加表单控件。在submitForm()方法中,您可以处理表单的提交逻辑。这是一个基本的解决方案,可以帮助您处理Angular 9中的表单组问题。希望对您有帮助!