fixup! feat(@angular/cli): add initial set of signal form examples

Author: clydin

packages/angular/cli/lib/examples/signal-forms/01-basic-signal-form.md

@@ -41,7 +41,7 @@ import { Component, signal, output, ChangeDetectionStrategy } from '@angular/cor
 import { form, submit, Control } from '@angular/forms/signals';
 import { JsonPipe } from '@angular/common';
 
-export interface UserProfile {
+export interface UserProfileData {
   firstName: string;
   lastName: string;
   email: string;
@@ -54,9 +54,9 @@ export interface UserProfile {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class UserProfileComponent {
-  readonly submitted = output<UserProfile>();
+  readonly submitted = output<UserProfileData>();
 
-  profileModel = signal<UserProfile>({
+  profileModel = signal<UserProfileData>({
     firstName: '',
     lastName: '',
     email: '',
@@ -115,13 +115,13 @@ The template is wrapped in a `<form>` tag with a `(submit)` event and a submit b
 
 ## How to Use This Example
 
-The parent component imports the `UserProfile` interface and listens for the `(submitted)` event to receive the strongly-typed form data.
+The parent component imports the `UserProfileData` interface and listens for the `(submitted)` event to receive the strongly-typed form data.
 
 ```typescript
 // in app.component.ts
 import { Component } from '@angular/core';
 import { JsonPipe } from '@angular/common';
-import { UserProfileComponent, UserProfile } from './user-profile.component';
+import { UserProfileComponent, UserProfileData } from './user-profile.component';
 
 @Component({
   selector: 'app-root',
@@ -137,9 +137,9 @@ import { UserProfileComponent, UserProfile } from './user-profile.component';
   `,
 })
 export class AppComponent {
-  submittedData: UserProfile | null = null;
+  submittedData: UserProfileData | null = null;
 
-  onProfileSubmit(data: UserProfile) {
+  onProfileSubmit(data: UserProfileData) {
     this.submittedData = data;
     console.log('Profile data submitted:', data);
   }

packages/angular/cli/lib/examples/signal-forms/02-built-in-validators.md

@@ -49,14 +49,14 @@ import { form, schema, submit, Control } from '@angular/forms/signals';
 import { required, minLength, maxLength, min, max, email, pattern } from '@angular/forms/signals';
 import { JsonPipe } from '@angular/common';
 
-export interface UserSettings {
+export interface UserSettingsData {
   username: string;
   age: number;
   email: string;
   website: string;
 }
 
-const settingsSchema = schema<UserSettings>((form) => {
+const settingsSchema = schema<UserSettingsData>((form) => {
   required(form.username);
   minLength(form.username, 3);
   maxLength(form.username, 20);
@@ -78,9 +78,9 @@ const settingsSchema = schema<UserSettings>((form) => {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class UserSettingsComponent {
-  readonly submitted = output<UserSettings>();
+  readonly submitted = output<UserSettingsData>();
 
-  settingsModel = signal<UserSettings>({
+  settingsModel = signal<UserSettingsData>({
     username: '',
     age: 18,
     email: '',
@@ -183,7 +183,7 @@ The parent component listens for the `(submitted)` event to receive the validate
 // in app.component.ts
 import { Component } from '@angular/core';
 import { JsonPipe } from '@angular/common';
-import { UserSettingsComponent, UserSettings } from './user-settings.component';
+import { UserSettingsComponent, UserSettingsData } from './user-settings.component';
 
 @Component({
   selector: 'app-root',
@@ -199,9 +199,9 @@ import { UserSettingsComponent, UserSettings } from './user-settings.component';
   `,
 })
 export class AppComponent {
-  submittedData: UserSettings | null = null;
+  submittedData: UserSettingsData | null = null;
 
-  onFormSubmit(data: UserSettings) {
+  onFormSubmit(data: UserSettingsData) {
     this.submittedData = data;
     console.log('Settings data submitted:', data);
   }

packages/angular/cli/lib/examples/signal-forms/03-cross-field-validation.md

@@ -54,12 +54,12 @@ import {
 } from '@angular/forms/signals';
 import { JsonPipe } from '@angular/common';
 
-export interface PasswordForm {
+export interface PasswordData {
   password: string;
   confirmPassword: string;
 }
 
-const passwordSchema = schema<PasswordForm>((passwordForm) => {
+const passwordSchema = schema<PasswordData>((passwordForm) => {
   validate(passwordForm.password, ({ value }) => {
     if (value() === '') return requiredError();
     if (value().length < 8) return minLengthError(8);
@@ -81,9 +81,9 @@ const passwordSchema = schema<PasswordForm>((passwordForm) => {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PasswordFormComponent {
-  readonly submitted = output<PasswordForm>();
+  readonly submitted = output<PasswordData>();
 
-  passwordModel = signal<PasswordForm>({
+  passwordModel = signal<PasswordData>({
     password: '',
     confirmPassword: '',
   });
@@ -152,7 +152,7 @@ The parent component listens for the `(submitted)` event and receives the strong
 // in app.component.ts
 import { Component } from '@angular/core';
 import { JsonPipe } from '@angular/common';
-import { PasswordFormComponent, PasswordForm } from './password-form.component';
+import { PasswordFormComponent, PasswordData } from './password-form.component';
 
 @Component({
   selector: 'app-root',
@@ -168,9 +168,9 @@ import { PasswordFormComponent, PasswordForm } from './password-form.component';
   `,
 })
 export class AppComponent {
-  submittedData: PasswordForm | null = null;
+  submittedData: PasswordData | null = null;
 
-  onPasswordSubmit(data: PasswordForm) {
+  onPasswordSubmit(data: PasswordData) {
     this.submittedData = data;
     console.log('Password data submitted:', data);
   }

packages/angular/cli/lib/examples/signal-forms/04-conditional-validation.md

@@ -43,12 +43,12 @@ import { Component, signal, output, ChangeDetectionStrategy } from '@angular/cor
 import { form, schema, applyWhen, required, submit, Control } from '@angular/forms/signals';
 import { JsonPipe } from '@angular/common';
 
-export interface ContactForm {
+export interface ContactData {
   subscribe: boolean;
   email: string;
 }
 
-const contactSchema = schema<ContactForm>((contactForm) => {
+const contactSchema = schema<ContactData>((contactForm) => {
   applyWhen(
     contactForm,
     ({ value }) => value().subscribe,
@@ -63,9 +63,9 @@ const contactSchema = schema<ContactForm>((contactForm) => {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ContactFormComponent {
-  readonly submitted = output<ContactForm>();
+  readonly submitted = output<ContactData>();
 
-  contactModel = signal<ContactForm>({
+  contactModel = signal<ContactData>({
     subscribe: false,
     email: '',
   });
@@ -122,7 +122,7 @@ The parent component listens for the `(submitted)` event and receives the strong
 // in app.component.ts
 import { Component } from '@angular/core';
 import { JsonPipe } from '@angular/common';
-import { ContactFormComponent, ContactForm } from './contact-form.component';
+import { ContactFormComponent, ContactData } from './contact-form.component';
 
 @Component({
   selector: 'app-root',
@@ -138,9 +138,9 @@ import { ContactFormComponent, ContactForm } from './contact-form.component';
   `,
 })
 export class AppComponent {
-  submittedData: ContactForm | null = null;
+  submittedData: ContactData | null = null;
 
-  onFormSubmit(data: ContactForm) {
+  onFormSubmit(data: ContactData) {
     this.submittedData = data;
     console.log('Contact data submitted:', data);
   }

packages/angular/cli/lib/examples/signal-forms/05-dynamic-field-state-hidden.md

@@ -41,12 +41,12 @@ import { Component, signal, output, ChangeDetectionStrategy } from '@angular/cor
 import { form, schema, hidden, required, submit, Control } from '@angular/forms/signals';
 import { JsonPipe } from '@angular/common';
 
-export interface ContactForm {
+export interface ContactData {
   reason: 'question' | 'feedback' | 'other';
   otherReason: string;
 }
 
-const contactSchema = schema<ContactForm>((form) => {
+const contactSchema = schema<ContactData>((form) => {
   // The `otherReason` field is hidden unless the reason is 'other'.
   hidden(form.otherReason, ({ valueOf }) => valueOf(form.reason) !== 'other');
 
@@ -61,9 +61,9 @@ const contactSchema = schema<ContactForm>((form) => {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ContactFormComponent {
-  readonly submitted = output<ContactForm>();
+  readonly submitted = output<ContactData>();
 
-  contactModel = signal<ContactForm>({
+  contactModel = signal<ContactData>({
     reason: 'question',
     otherReason: '',
   });
@@ -123,7 +123,7 @@ The parent component listens for the `(submitted)` event to receive the form dat
 // in app.component.ts
 import { Component } from '@angular/core';
 import { JsonPipe } from '@angular/common';
-import { ContactFormComponent, ContactForm } from './contact-form.component';
+import { ContactFormComponent, ContactData } from './contact-form.component';
 
 @Component({
   selector: 'app-root',
@@ -139,9 +139,9 @@ import { ContactFormComponent, ContactForm } from './contact-form.component';
   `,
 })
 export class AppComponent {
-  submittedData: ContactForm | null = null;
+  submittedData: ContactData | null = null;
 
-  onFormSubmit(data: ContactForm) {
+  onFormSubmit(data: ContactData) {
     this.submittedData = data;
     console.log('Contact data submitted:', data);
   }

packages/angular/cli/lib/examples/signal-forms/06-conditionally-disabling-fields.md

@@ -41,12 +41,12 @@ import { Component, signal, output, ChangeDetectionStrategy } from '@angular/cor
 import { form, schema, disabled, required, submit, Control } from '@angular/forms/signals';
 import { JsonPipe } from '@angular/common';
 
-export interface PromoForm {
+export interface PromoData {
   hasPromoCode: boolean;
   promoCode: string;
 }
 
-const promoSchema = schema<PromoForm>((form) => {
+const promoSchema = schema<PromoData>((form) => {
   // The `promoCode` field is disabled if `hasPromoCode` is false.
   disabled(form.promoCode, ({ valueOf }) => !valueOf(form.hasPromoCode));
 
@@ -61,9 +61,9 @@ const promoSchema = schema<PromoForm>((form) => {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PromoFormComponent {
-  readonly submitted = output<PromoForm>();
+  readonly submitted = output<PromoData>();
 
-  promoModel = signal<PromoForm>({
+  promoModel = signal<PromoData>({
     hasPromoCode: false,
     promoCode: '',
   });
@@ -123,7 +123,7 @@ The parent component listens for the `(submitted)` event to receive the form dat
 // in app.component.ts
 import { Component } from '@angular/core';
 import { JsonPipe } from '@angular/common';
-import { PromoFormComponent, PromoForm } from './promo-form.component';
+import { PromoFormComponent, PromoData } from './promo-form.component';
 
 @Component({
   selector: 'app-root',
@@ -139,9 +139,9 @@ import { PromoFormComponent, PromoForm } from './promo-form.component';
   `,
 })
 export class AppComponent {
-  submittedData: PromoForm | null = null;
+  submittedData: PromoData | null = null;
 
-  onFormSubmit(data: PromoForm) {
+  onFormSubmit(data: PromoData) {
     this.submittedData = data;
     console.log('Promo data submitted:', data);
   }

packages/angular/cli/lib/examples/signal-forms/07-dynamic-arrays.md

@@ -42,21 +42,21 @@ import { Component, signal, output, ChangeDetectionStrategy } from '@angular/cor
 import { form, schema, applyEach, validate, submit } from '@angular/forms/signals';
 import { JsonPipe } from '@angular/common';
 
-export interface Question {
+export interface QuestionData {
   text: string;
   required: boolean;
 }
 
-export interface SurveyForm {
+export interface SurveyData {
   title: string;
-  questions: Question[];
+  questions: QuestionData[];
 }
 
-const questionSchema = schema<Question>((question) => {
+const questionSchema = schema<QuestionData>((question) => {
   validate(question.text, ({ value }) => (value() === '' ? { required: true } : null));
 });
 
-const surveySchema = schema<SurveyForm>((survey) => {
+const surveySchema = schema<SurveyData>((survey) => {
   validate(survey.title, ({ value }) => (value() === '' ? { required: true } : null));
   applyEach(survey.questions, questionSchema);
 });
@@ -68,9 +68,9 @@ const surveySchema = schema<SurveyForm>((survey) => {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SurveyFormComponent {
-  readonly submitted = output<SurveyForm>();
+  readonly submitted = output<SurveyData>();
 
-  surveyModel = signal<SurveyForm>({
+  surveyModel = signal<SurveyData>({
     title: '',
     questions: [{ text: '', required: false }],
   });
@@ -151,7 +151,7 @@ The parent component listens for the `(submitted)` event and receives the strong
 // in app.component.ts
 import { Component } from '@angular/core';
 import { JsonPipe } from '@angular/common';
-import { SurveyFormComponent, SurveyForm } from './survey-form.component';
+import { SurveyFormComponent, SurveyData } from './survey-form.component';
 
 @Component({
   selector: 'app-root',
@@ -167,9 +167,9 @@ import { SurveyFormComponent, SurveyForm } from './survey-form.component';
   `,
 })
 export class AppComponent {
-  submittedData: SurveyForm | null = null;
+  submittedData: SurveyData | null = null;
 
-  onFormSubmit(data: SurveyForm) {
+  onFormSubmit(data: SurveyData) {
     this.submittedData = data;
     console.log('Survey data submitted:', data);
   }

packages/angular/cli/lib/examples/signal-forms/08-custom-form-control.md

@@ -74,7 +74,7 @@ import { form, submit, Control } from '@angular/forms/signals';
 import { JsonPipe } from '@angular/common';
 import { NumericStepperComponent } from './numeric-stepper.component';
 
-export interface ProductForm {
+export interface ProductData {
   name: string;
   quantity: number;
 }
@@ -86,9 +86,9 @@ export interface ProductForm {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProductFormComponent {
-  readonly submitted = output<ProductForm>();
+  readonly submitted = output<ProductData>();
 
-  productModel = signal<ProductForm>({
+  productModel = signal<ProductData>({
     name: 'Angular T-Shirt',
     quantity: 1,
   });
@@ -140,7 +140,7 @@ The parent component listens for the `(submitted)` event and receives the strong
 // in app.component.ts
 import { Component } from '@angular/core';
 import { JsonPipe } from '@angular/common';
-import { ProductFormComponent, ProductForm } from './product-form.component';
+import { ProductFormComponent, ProductData } from './product-form.component';
 
 @Component({
   selector: 'app-root',
@@ -156,9 +156,9 @@ import { ProductFormComponent, ProductForm } from './product-form.component';
   `,
 })
 export class AppComponent {
-  submittedData: ProductForm | null = null;
+  submittedData: ProductData | null = null;
 
-  onFormSubmit(data: ProductForm) {
+  onFormSubmit(data: ProductData) {
     this.submittedData = data;
     console.log('Product data submitted:', data);
   }