在响应式表单中,可以使用FormBuilder
来构建表单,并通过FormGroup
来管理表单控件的值和状态。
以下是一个使用FormBuilder
构建响应式表单的示例:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-example',
template: `
`,
})
export class ExampleComponent {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.myForm = this.formBuilder.group({
name: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
});
}
onSubmit() {
if (this.myForm.valid) {
console.log(this.myForm.value);
}
}
}
在上面的示例中,我们使用FormBuilder
创建了一个FormGroup
对象并将其赋值给myForm
属性。在构造函数中,我们定义了两个表单控件:name
和email
,并设置了一些验证规则。
这样,我们就可以像使用ngForm
一样在模板中使用myForm
来管理表单的值和状态。在onSubmit
方法中,我们检查myForm
是否有效,如果有效则打印表单的值。