在Angular中,可以使用FormGroup
类和FormBuilder
服务来创建和管理表单。如果想在一个FormGroup
中添加另一个FormGroup
,可以使用addControl
方法。
以下是一个示例代码,演示如何在一个FormGroup
中添加另一个FormGroup
:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-example',
template: `
`,
})
export class ExampleComponent implements OnInit {
mainForm: FormGroup;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.mainForm = this.formBuilder.group({
group1: this.formBuilder.group({
control1: ['', Validators.required],
control2: ['', Validators.required],
}),
});
}
}
在上面的代码中,首先导入了FormBuilder
、FormGroup
和Validators
。然后在组件的构造函数中注入了FormBuilder
。
在ngOnInit
方法中,使用formBuilder.group
创建了一个名为group1
的FormGroup
,并在其中添加了两个名为control1
和control2
的表单控件。使用空字符串作为初始值,并应用了必填验证器。
在模板中,使用[formGroup]
绑定主表单mainForm
。使用formGroupName
指令将group1
作为子表单组添加到主表单中。然后使用formControlName
指令将control1
和control2
与相应的输入框绑定起来。
这样就实现了在一个FormGroup
中添加另一个FormGroup
的功能。