Angular with ASP.NET Core API

1{
2  "/api": {
3    "target": "https://localhost:7001",
4    "secure": false,
5    "changeOrigin": true
6  }
7}

1import { Component, Injectable, inject, signal } from '@angular/core';
2import { HttpClient, HttpErrorResponse } from '@angular/common/http';
3import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
4

5// Mirrors the C# DTOs (ASP.NET Core serialises them in camelCase)
6//   public record CreateProductRequest(string Name, decimal Price);
7//   public record ProductDto(int Id, string Name, decimal Price);
8export type CreateProductRequest = { name: string; price: number };
9export type ProductDto = { id: number; name: string; price: number };
10

11type ValidationProblem = { title: string; status: number; errors?: Record<string, string[]> };
12

13@Injectable({ providedIn: 'root' })
14export class ProductApi {
15  private http = inject(HttpClient);
16  create(body: CreateProductRequest) {
17    return this.http.post<ProductDto>('/api/products', body);   // proxied to Kestrel in dev
18  }
19}
20

21@Component({
22  selector: 'app-product-form',
23  imports: [ReactiveFormsModule],
24  template: `
25    <form [formGroup]="form" (ngSubmit)="save()">
26      <label>Name <input formControlName="name" /></label>
27      @if (form.controls.name.errors?.['server']) { <small>{{ form.controls.name.errors?.['server'] }}</small> }
28

29      <label>Price <input formControlName="price" type="number" /></label>
30      @if (form.controls.price.errors?.['server']) { <small>{{ form.controls.price.errors?.['server'] }}</small> }
31

32      <button [disabled]="saving()">Save</button>
33      @if (message()) { <p>{{ message() }}</p> }
34    </form>
35  `,
36})
37export class ProductForm {
38  private api = inject(ProductApi);
39  form = inject(FormBuilder).nonNullable.group({ name: '', price: 0 });
40  saving = signal(false);
41  message = signal('');
42

43  save() {
44    this.saving.set(true);
45    this.message.set('');
46    this.api.create(this.form.getRawValue()).subscribe({
47      next: product => { this.saving.set(false); this.message.set(`Saved #${product.id}: ${product.name}`); },
48      error: (err: HttpErrorResponse) => {
49        this.saving.set(false);
50        const problem = err.error as ValidationProblem | null;
51        if (err.status === 400 && problem?.errors) {
52          for (const [key, messages] of Object.entries(problem.errors)) {
53            const control = this.form.get(key.charAt(0).toLowerCase() + key.slice(1));   // "Name" → "name"
54            control?.setErrors({ server: messages[0] });
55            control?.markAsTouched();
56          }
57          this.message.set(problem.title);
58        } else {
59          this.message.set('Could not save the product. Please try again.');
60        }
61      },
62    });
63  }
64}

Submitting an empty form sends { "name": "", "price": 0 } to the ASP.NET Core API. [ApiController] answers 400 with ProblemDetails, and the form shows “The Name field is required.” under Name, “The field Price must be between 1 and 100000.” under Price, and the title “One or more validation errors occurred.”. A valid submission shows “Saved #12: Notebook”.