Javascript 角度4-包含多个组件的表单-提交数据
我是新手 我有一个包含3个部分的页面。这些部分被创建为单独的表单 第1节-基本信息Javascript 角度4-包含多个组件的表单-提交数据,javascript,angular,angular4-forms,Javascript,Angular,Angular4 Forms,我是新手 我有一个包含3个部分的页面。这些部分被创建为单独的表单 第1节-基本信息 first name last name email address city state zip Order id Item name quantity 第2节-联系信息 first name last name email address city state zip Order id Item name quantity 第3节-订单信息 first name last name email
first name
last name
email
address
city
state
zip
Order id
Item name
quantity
first name
last name
email
address
city
state
zip
Order id
Item name
quantity
first name
last name
email
address
city
state
zip
Order id
Item name
quantity
如何通过单击一个按钮提交所有这些组件数据？有不同的方法。您可以在以下位置查看有关组件交互的角度文档： 在您的情况下，一种简单的方法是使用ViewChild
@ViewChild(BasicInfoComponent)
private basicInfoComponent: BasicInfoComponent;
@ViewChild(ContactInfoComponent)
private contactComponent: ContactInfoComponent;
@ViewChild(OrderInfoComponent)
private orderComponent: OrderInfoComponent;
然后单击按钮，您可以访问这些子组件中的数据。使用模型驱动表单，这可以非常容易地实现。我在中创建了一个简单的应用程序
//我们的根应用程序组件
从“@angular/core”导入{Component，NgModule，Input}
从“@angular/platform browser”导入{BrowserModule}
从'@angular/forms'导入{FormsModule，ReactiveFormsModule}；
从“@angular/forms”导入{FormBuilder、FormGroup、Validators、FormArray、FormControl}；
@组成部分({
选择器：“我的应用程序”，
模板：`
嵌套表单组
姓名：
表单值：{myForm.value | json}
`,
})
导出类应用程序{
myForm:FormGroup
构造函数（私有fb:FormBuilder）{}
恩戈尼尼特（）{
this.myForm=this.fb.group({
姓名：['']，
地址：this.fb.group({
街道：['']，
邮编：['']
})
})
}
}
@组成部分({
选择器：“应用程序子项”，
模板：`
街道：
邮编：
`,
})
导出类AppChild{
@Input（）地址：FormGroup；
}
@NGD模块({
导入：[BrowserModule，FormsModule，ReactiveFormsModule]，
声明：[App，AppChild]，
引导：[应用程序]
})
导出类AppModule{}