在Angular 15中,可以通过使用FormGroup和FormControl来处理表单提交问题。下面是一个示例:
首先,创建一个FormGroup对象,用于表示整个表单。在组件的构造函数中初始化FormGroup对象:
import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-my-form',
template: `
`,
})
export class MyFormComponent {
myForm: FormGroup;
constructor() {
this.myForm = new FormGroup({
name: new FormControl(''),
});
}
onSubmit() {
console.log(this.myForm.value);
// 处理表单提交逻辑
}
}
在模板中,使用formGroup指令将myForm绑定到表单元素上。使用formControlName指令为输入框绑定FormControl。
在组件中,使用ngSubmit事件监听表单的提交事件,并调用onSubmit方法处理提交逻辑。在onSubmit方法中,可以通过this.myForm.value获取表单的值,并进行进一步处理。
这样,当用户点击Submit按钮时,会触发表单的提交事件,并调用onSubmit方法处理提交逻辑。