首先,确保在表单标记上添加了“formGroup”属性,并将该属性的值设置为应用程序中相应的表单组。
确保将表单控件与相应的表单控制器相匹配,并将控件的名称设置为应用程序中相应的控制器名称。
在提交表单的代码中使用表单的“value”属性,以获取用户提供的数据。例如:
HTML文件:
组件文件:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'mycomponent',
templateUrl: './mycomponent.component.html'
})
export class MyComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.myForm = this.fb.group({
name: ['', Validators.required],
email: ['', Validators.required]
});
}
onSubmit() {
const formData = this.myForm.value;
// save formData to backend
}
}
注意,我们在组件的“ngOnInit”方法中创建了表单组,并将其绑定到模板。在提交表单的方法中,我们使用“myForm”属性的值来获取表单数据。最后,我们可以将数据保存到后台。