Angular実践 #3 フォーム + API で Product CRUD

export interface Product {
  id: number;
  name: string;
  price: number;
  category: 'food' | 'drink' | 'goods';
  description: string;
  createdAt: string;
}

export type NewProduct = Omit<Product, 'id' | 'createdAt'>;
export type ProductPatch = Partial<NewProduct>;

@Injectable({ providedIn: 'root' })
export class ProductService {
  private http = inject(HttpClient);
  private base = '/api/products';

  list() { return this.http.get<Product[]>(this.base); }
  get(id: number) { return this.http.get<Product>(`${this.base}/${id}`); }
  create(payload: NewProduct) { return this.http.post<Product>(this.base, payload); }
  update(id: number, patch: ProductPatch) {
    return this.http.patch<Product>(`${this.base}/${id}`, patch);
  }
  remove(id: number) { return this.http.delete<void>(`${this.base}/${id}`); }
}

@Component({
  selector: 'app-product-list',
  standalone: true,
  imports: [RouterLink],
  templateUrl: './product-list.component.html',
})
export class ProductListComponent {
  private products = inject(ProductService);

  protected readonly state = toSignal(
    this.products.list().pipe(catchError(() => of(null))),
    { initialValue: 'loading' as const },
  );
}

<header>
  <h1>商品一覧</h1>
  <a routerLink="/products/new">+ 商品を追加</a>
</header>

@if (state() === 'loading') {
  <p>読み込み中...</p>
} @else if (state() === null) {
  <p class="error">商品を読み込めませんでした。しばらくしてからもう一度お試しください。</p>
} @else if (state()!.length === 0) {
  <p class="empty">まだ登録された商品がありません。</p>
} @else {
  <ul class="grid">
    @for (p of state(); track p.id) {
      <li class="card">
        <a [routerLink]="['/products', p.id]">
          <h3>{{ p.name }}</h3>
          <p>{{ p.price | number }}円</p>
        </a>
      </li>
    }
  </ul>
}

export const productResolver: ResolveFn<Product | null> = (route) => {
  const id = Number(route.paramMap.get('id'));
  const router = inject(Router);

  return inject(ProductService).get(id).pipe(
    catchError(() => {
      router.navigate(['/products']);
      return of(null);
    }),
  );
};

@Component({
  selector: 'app-product-detail',
  standalone: true,
  imports: [RouterLink],
  templateUrl: './product-detail.component.html',
})
export class ProductDetailComponent {
  private route = inject(ActivatedRoute);
  protected readonly product = this.route.snapshot.data['product'] as Product;
}

@Component({
  selector: 'app-product-create',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './product-create.component.html',
})
export class ProductCreateComponent {
  private fb = inject(FormBuilder);
  private products = inject(ProductService);
  private router = inject(Router);

  protected submitting = signal(false);
  protected errorMessage = signal<string | null>(null);

  protected form = this.fb.nonNullable.group({
    name: ['', [Validators.required, Validators.maxLength(80)]],
    price: [0, [Validators.required, Validators.min(0)]],
    category: ['goods' as 'food' | 'drink' | 'goods', Validators.required],
    description: ['', Validators.maxLength(500)],
  });

  onSubmit() {
    if (this.form.invalid) { this.form.markAllAsTouched(); return; }

    this.submitting.set(true);
    this.errorMessage.set(null);

    this.products.create(this.form.getRawValue()).subscribe({
      next: created => this.router.navigate(['/products', created.id]),
      error: () => {
        this.errorMessage.set('保存に失敗しました。もう一度お試しください。');
        this.submitting.set(false);
      },
    });
  }
}

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <label>
    名前
    <input formControlName="name" />
    @if (form.controls.name.touched && form.controls.name.invalid) {
      <small class="error">名前を入力してください (80 文字以内)。</small>
    }
  </label>

  <label>価格 <input type="number" formControlName="price" min="0" /></label>

  <label>
    カテゴリ
    <select formControlName="category">
      <option value="goods">雑貨</option>
      <option value="food">食品</option>
      <option value="drink">飲料</option>
    </select>
  </label>

  <label>説明 <textarea formControlName="description" rows="4"></textarea></label>

  @if (errorMessage()) { <p class="error">{{ errorMessage() }}</p> }

  <button type="submit" [disabled]="submitting()">
    {{ submitting() ? '保存中...' : '保存' }}
  </button>
</form>

export class ProductEditComponent {
  private fb = inject(FormBuilder);
  private route = inject(ActivatedRoute);
  private router = inject(Router);
  private products = inject(ProductService);

  private original = this.route.snapshot.data['product'] as Product;
  protected submitting = signal(false);

  protected form = this.fb.nonNullable.group({
    name: [this.original.name, [Validators.required, Validators.maxLength(80)]],
    price: [this.original.price, [Validators.required, Validators.min(0)]],
    category: [this.original.category, Validators.required],
    description: [this.original.description, Validators.maxLength(500)],
  });

  onSubmit() {
    if (this.form.invalid) { this.form.markAllAsTouched(); return; }

    const patch = this.diff();
    if (Object.keys(patch).length === 0) {
      this.router.navigate(['/products', this.original.id]);
      return;
    }

    this.submitting.set(true);
    this.products.update(this.original.id, patch).subscribe({
      next: () => this.router.navigate(['/products', this.original.id]),
      error: () => this.submitting.set(false),
    });
  }

  private diff(): ProductPatch {
    const current = this.form.getRawValue();
    const result: ProductPatch = {};
    (Object.keys(current) as (keyof typeof current)[]).forEach(key => {
      if (current[key] !== this.original[key]) {
        (result as Record<string, unknown>)[key] = current[key];
      }
    });
    return result;
  }
}

protected onDelete() {
  if (!confirm(`'${this.product.name}' を削除しますか?`)) return;

  this.products.remove(this.product.id).subscribe({
    next: () => this.router.navigate(['/products']),
    error: () => alert('削除に失敗しました。'),
  });
}

export class ProductListComponent {
  private products = inject(ProductService);
  protected items = signal<Product[]>([]);
  // ...初期ロードのロジックは省略 (toSignal または effect)

  onDelete(target: Product) {
    if (!confirm(`'${target.name}' を削除しますか?`)) return;

    const snapshot = this.items();
    // 1. 画面を先に変える
    this.items.update(list => list.filter(p => p.id !== target.id));

    // 2. サーバーに知らせる
    this.products.remove(target.id).subscribe({
      error: () => {
        // 3. 失敗時はロールバック
        this.items.set(snapshot);
        alert('削除に失敗しました。画面を元に戻しました。');
      },
    });
  }
}