下面是一个使用Angular响应式表单的示例,该示例通过按钮点击提交表单数据:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-my-form',
templateUrl: './my-form.component.html',
styleUrls: ['./my-form.component.css']
})
export class MyFormComponent implements OnInit {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.myForm = this.formBuilder.group({
name: ['', Validators.required],
email: ['', [Validators.required, Validators.email]]
});
}
onSubmit() {
console.log(this.myForm.value); // 在这里可以处理提交表单数据的逻辑
}
}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MyFormComponent } from './my-form.component';
@NgModule({
declarations: [
MyFormComponent
],
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule
],
exports: [
MyFormComponent
]
})
export class MyFormModule { }
这样,你就可以使用Angular响应式表单来创建一个带有按钮点击提交功能的表单了。当表单验证通过并点击提交按钮时,onSubmit()
方法会被调用,并将表单数据打印到控制台。你可以在onSubmit()
方法中添加自己的逻辑来处理表单提交。
上一篇:Angular响应式表单提交事件
下一篇:Angular响应式表单未定义值