在Angular中,可以使用FormGroup
和FormControl
来创建响应式表单。要存储JSON数据,可以使用JSON.stringify()
方法将表单数据转换为JSON字符串,并将其存储在变量中。下面是一个示例代码:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
export class MyComponent implements OnInit {
myForm: FormGroup;
ngOnInit() {
this.myForm = new FormGroup({
name: new FormControl(''),
age: new FormControl(''),
email: new FormControl('')
});
}
}
export class MyComponent implements OnInit {
myForm: FormGroup;
jsonData: string;
ngOnInit() {
this.myForm = new FormGroup({
name: new FormControl(''),
age: new FormControl(''),
email: new FormControl('')
});
}
saveFormData() {
this.jsonData = JSON.stringify(this.myForm.value);
}
}
JSON Data: {{ jsonData }}
当用户在表单中输入数据并点击保存按钮时,表单数据将被转换为JSON字符串并存储在jsonData
变量中。最后,可以通过插值表达式来显示JSON数据。
注意:在使用响应式表单之前,确保已经导入了ReactiveFormsModule
模块,并在imports
数组中添加了该模块。