如何处理在Angular中创建的联系人？

export class Contact {
  name: string;
  phoneNumber: string;
  email: string;
}

<form (ngSubmit)="onSubmit()">
  <label for="name">Name:</label>
  <input type="text" id="name" [(ngModel)]="contact.name" name="name" required>

  <label for="phoneNumber">Phone Number:</label>
  <input type="text" id="phoneNumber" [(ngModel)]="contact.phoneNumber" name="phoneNumber" required>

  <label for="email">Email:</label>
  <input type="email" id="email" [(ngModel)]="contact.email" name="email" required>

  <button type="submit">Add Contact</button>
</form>

import { Component } from '@angular/core';
import { Contact } from './contact.model';
import { ContactService } from './contact.service';

@Component({
  selector: 'app-contact-form',
  templateUrl: './contact-form.component.html',
  styleUrls: ['./contact-form.component.css']
})
export class ContactFormComponent {
  contact: Contact = new Contact();

  constructor(private contactService: ContactService) {}

  onSubmit() {
    this.contactService.addContact(this.contact).subscribe(() => {
      // 处理添加联系人成功的逻辑
      console.log('Contact added successfully!');
    }, (error) => {
      // 处理添加联系人失败的逻辑
      console.error('Failed to add contact:', error);
    });
  }
}

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Contact } from './contact.model';

@Injectable({
  providedIn: 'root'
})
export class ContactService {
  private apiUrl = 'https://example.com/api/contacts';

  constructor(private http: HttpClient) {}

  addContact(contact: Contact): Observable<Contact> {
    return this.http.post<Contact>(this.apiUrl, contact);
  }
}