在Angular中正确实现“保存表单并关闭”按钮

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder, private http: HttpClient) {
    this.form = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      // 其他表单字段...
    });
  }

  onSave() {
    if (this.form.valid) {
      const formData = this.form.value;
      // 发送表单数据到后端服务器进行保存
      this.http.post('/api/save', formData).subscribe(
        response => {
          // 保存成功后执行关闭操作
          this.closeForm();
        },
        error => {
          console.error('保存失败:', error);
          // 显示保存失败的错误信息
        }
      );
    } else {
      // 表单无效，显示错误信息或禁用保存按钮
    }
  }

  closeForm() {
    // 执行关闭操作，可以通过路由导航或模态框的关闭方法来关闭当前表单页面
  }
}