create-claude-workspace 1.1.69 → 1.1.70

package/dist/template/.claude/profiles/angular.md

@@ -148,6 +148,53 @@ export class ProjectDetail {
 - WebSocket/SSE streams — use dedicated services
 - Non-HTTP async — use `resource()` instead
 
+## Forms — Signal Forms API
+
+Use the **signal-based forms API** (`@angular/forms/signals`) for all form handling when available in the project's Angular version (stable or experimental). NEVER use legacy `FormControl`/`FormGroup`/`FormBuilder`/`ReactiveFormsModule`.
+
+**Signal forms pattern:**
+```typescript
+import { Component, signal } from '@angular/core';
+import { form, FormField, required, email, minLength } from '@angular/forms/signals';
+
+@Component({
+  imports: [FormField],
+  template: `
+    <input type="email" [formField]="loginForm.email" />
+    <input type="password" [formField]="loginForm.password" />
+    <button [disabled]="loginForm.invalid()">Submit</button>
+  `,
+})
+export class LoginForm {
+  readonly loginModel = signal({ email: '', password: '' });
+  readonly loginForm = form(this.loginModel, (schema) => {
+    required(schema.email);
+    email(schema.email);
+    required(schema.password);
+    minLength(schema.password, 8);
+  });
+
+  // Field state is signal-based:
+  // this.loginForm.email().value()     — current value (signal)
+  // this.loginForm.email().dirty()     — boolean signal
+  // this.loginForm.email().invalid()   — boolean signal
+  // this.loginForm.email().value.set('new@email.com') — update programmatically
+}
+```
+
+**Key rules:**
+- `form()` function with a signal model — form structure derived from model shape
+- Validators from `@angular/forms/signals`: `required()`, `email()`, `minLength()`, `maxLength()`, `min()`, `max()`, `pattern()`
+- Template binding via `[formField]` directive (import `FormField`)
+- All field state (value, dirty, invalid, disabled) is signal-based — bind directly in templates
+- No `.valueChanges` subscriptions — state is already reactive
+
+**NEVER:**
+- `new FormControl()` / `new FormGroup()` / `new FormArray()` / `FormBuilder` — use `form()` with signal model
+- `ReactiveFormsModule` / `FormsModule` — use `FormField` directive from `@angular/forms/signals`
+- `.valueChanges.subscribe()` — field state is already reactive via signals
+- Wrapping validators in arrow functions (`control => Validators.required(control)`)
+
 ## Templates — MINIMAL Logic
 
 - ZERO method calls in templates — wrap in `computed()`, bind the signal
@@ -343,6 +390,7 @@ describe('CardBadge', () => {
 
 When reviewing Angular code, check:
 - Signal usage: signal/computed/input/output/model correctly used
+- Forms: SignalFormBuilder used (no legacy FormControl/FormGroup/FormBuilder)
 - ZERO method calls in templates — all derived state in computed()
 - Feature vs dumb separation — no inject() in ui/ components
 - Content projection (composite pattern) over deep @Input trees

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-claude-workspace",
-  "version": "1.1.69",
+  "version": "1.1.70",
   "description": "Scaffold a project with Claude Code agents for autonomous AI-driven development",
   "type": "module",
   "bin": {