要在Angular 7中启用使用FormControl字段提交表单,您可以按照以下步骤操作:
首先,确保您已经安装了Angular Forms模块。您可以通过运行以下命令来安装它:
npm install @angular/forms
在模块文件中导入并添加FormsModule到您的app.module.ts文件中:
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
FormsModule,
ReactiveFormsModule
],
// ...
})
export class AppModule { }
在组件类中创建一个FormGroup,并在其中定义您的FormControl字段。您可以使用FormBuilder来简化此过程:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-your-component',
template: `
`
})
export class YourComponent {
myForm: FormGroup;
constructor(private fb: FormBuilder) {
this.myForm = this.fb.group({
name: ['', Validators.required]
});
}
onSubmit() {
if (this.myForm.valid) {
console.log(this.myForm.value);
// 在此处执行提交表单的操作
}
}
}
在上面的示例中,我们在组件类中创建了一个名为myForm的FormGroup,并在其中定义了一个名为name的FormControl字段。在模板中,我们使用formControlName指令将输入字段与FormControl字段进行绑定,并使用ngSubmit事件在提交按钮上调用onSubmit方法。
最后,在模板中,确保您的表单标记具有formGroup属性绑定到myForm,并且您的提交按钮具有type="submit"属性。
这样,当用户点击提交按钮时,它将检查表单的有效性,并将表单的值打印到开发者工具的控制台中。您可以在onSubmit方法中执行其他提交表单的操作。