Angular的FormBuilder组件并没有被弃用,它仍然是Angular中构建表单的核心组件之一。以下是一个使用FormBuilder构建表单的示例:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-my-form',
template: `
`,
})
export class MyFormComponent implements OnInit {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.myForm = this.formBuilder.group({
name: ['', Validators.required],
});
}
onSubmit() {
if (this.myForm.invalid) {
return;
}
// 处理表单提交逻辑
}
}
在这个示例中,我们使用FormBuilder来创建一个名为myForm
的表单,其中包含一个名为name
的输入字段,并且该字段是必填的。当用户提交表单时,我们可以在onSubmit
方法中处理表单的提交逻辑。
请注意,为了使用FormBuilder,你需要在你的组件中导入FormBuilder
、FormGroup
和Validators
。