Angular Forms -如何按ID编辑(修补)现有记录

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { DataService } from 'path/to/data.service';

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

  constructor(private formBuilder: FormBuilder, private dataService: DataService) { }

  ngOnInit() {
    // 初始化表单
    this.form = this.formBuilder.group({
      id: ['', Validators.required],
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      // 其他字段...
    });

    // 获取现有记录
    const recordId = '123'; // 假设要编辑的记录的ID为123
    this.dataService.getRecordById(recordId).subscribe((data) => {
      this.record = data;

      // 使用现有记录的数据填充表单字段的初始值
      this.form.patchValue({
        id: this.record.id,
        name: this.record.name,
        email: this.record.email,
        // 其他字段...
      });
    });
  }

  onSubmit() {
    if (this.form.valid) {
      // 获取表单字段的值
      const formData = this.form.value;

      // 将表单数据发送到后端进行保存或更新
      this.dataService.updateRecord(formData).subscribe(() => {
        // 更新成功后的处理
      });
    }
  }
}