在Angular中,可以使用父子组件的方式来实现嵌套表单。下面是一个示例代码,演示了如何使用父子组件来创建嵌套表单。
首先,创建一个父组件,命名为ParentComponent
。在该组件的模板中,使用formGroup
指令创建一个表单,并在表单中使用formControlName
指令来绑定表单控件。同时,将子组件ChildComponent
作为一个子元素添加到父组件的模板中,并将父组件的表单传递给子组件。
parent.component.html:
在父组件的代码中,需要创建一个FormGroup
对象来表示父组件的表单,并初始化表单控件。
parent.component.ts:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
parentForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.parentForm = this.fb.group({
name: '',
email: ''
});
}
}
接下来,创建一个子组件ChildComponent
。在子组件的模板中,也使用formGroup
指令创建一个表单,并在表单中使用formControlName
指令来绑定表单控件。
child.component.html:
在子组件的代码中,需要接收父组件传递过来的表单,并创建一个FormGroup
对象来表示子组件的表单,并初始化表单控件。
child.component.ts:
import { Component, Input, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
@Input() formGroup: FormGroup;
childForm: FormGroup;
constructor() { }
ngOnInit() {
this.childForm = this.formGroup.group({
age: '',
address: ''
});
}
}
最后,在模块中引入父组件和子组件,并将它们添加到declarations
和exports
数组中。
app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { ParentComponent } from './parent.component';
import { ChildComponent } from './child.component';
@NgModule({
declarations: [
AppComponent,
ParentComponent,
ChildComponent
],
imports: [
BrowserModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
这样,就完成了一个简单的Angular嵌套表单的父子组件实现。在父组件中创建了一个包含子组件的表单,并在子组件中创建了另一个表单。父子组件之间可以通过@Input
装饰器传递表单对象,从而实现表单的嵌套。
上一篇:Angular嵌套表单