在Angular中,可以通过使用FormGroup和FormArray来处理嵌套的表单组,并从中获取表单数组的值。下面是一个解决方法的代码示例:
首先,创建一个包含嵌套表单组的表单模板:
然后,在组件中定义并初始化表单:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.myForm = this.formBuilder.group({
nestedForms: this.formBuilder.array([this.createNestedForm()])
});
}
createNestedForm(): FormGroup {
return this.formBuilder.group({
name: '',
email: ''
});
}
get nestedForms(): FormArray {
return this.myForm.get('nestedForms') as FormArray;
}
getFormData() {
console.log(this.myForm.value);
}
}
在上述代码中,我们使用FormBuilder来创建表单和表单控件。createNestedForm方法用于创建嵌套表单组的表单模板。get nestedForms方法用于获取表单数组的引用。
最后,我们可以在组件的getFormData方法中使用this.myForm.value来获取表单数组的值,并将其打印到控制台中。
请确保在模块中引入FormsModule和ReactiveFormsModule,并将MyComponent添加到相应的模块中,以便正确使用表单。