<form>
  <input type="email" placeholder="Email" />

  <input type="password" placeholder="Password" />

  <button>Login</button>
</form>

export interface LoginFormModel {
  email: string;
  password: string;
}

import { Field, form } from '@angular/forms/signals';

@Component({
  selector: 'app-login',
  imports: [Field],
  template: `on next slide :)`
})
export class LoginComponent {
  loginForm = form(this.loginModel);
}

import { Field, form } from '@angular/forms/signals';

@Component({
  selector: 'app-login',
  imports: [Field],
  template: `on next slide :)`
})
export class LoginComponent {
  loginForm = form(this.loginModel);
}

<form>
  <input
    [field]="loginForm.email"
    type="email"
    placeholder="Enter your email"
  />

  <input
    [field]="loginForm.password"
    type="password"
    placeholder="Enter your password"
  />

  <button>Login</button>
</form>

<form>
  <input
    [field]="loginForm.email"
    type="email"
    placeholder="Enter your email"
  />
  @if (loginForm.email().touched() && loginForm.email().invalid()) {
    <p>The email is invalid.</p>
  }

  <input
    [field]="loginForm.password"
    type="password"
    placeholder="Enter your password"
  />
  <!-- same as above -->

  <button [disabled]="loginForm().invalid()">Login</button>
</form>

<form>
  <input
    [field]="loginForm.email"
    type="email"
    placeholder="Enter your email"
  />
  @for (error of loginForm.email().errors(); track error.kind) {
    @if (error.kind === "required") {
      <p>This field is required.</p>
    }
  }

  <input
    [field]="loginForm.password"
    type="password"
    placeholder="Enter your password"
  />
  <!-- same as above -->

  <button [disabled]="loginForm().invalid()">Login</button>
</form>

<form>
  <input
    [field]="loginForm.email"
    type="email"
    placeholder="Enter your email"
  />
  @for (error of loginForm.email().errors(); track error.kind) {
    @if (error.kind === "required") {
      <p>This field is required.</p>
    }
	@if (error.kind === "email") {
      <p>This field is invalid.</p>
    }
    @if (error.kind === "minlength") {
      <p>This field is short.</p>
    }
  }

  <button [disabled]="loginForm().invalid()">Login</button>
</form>

import { Field, email, 
        form, required  } from '@angular/forms/signals';

@Component({
  selector: 'app-login',
  imports: [Field],
  template: `on previous slide :)`
})
export class LoginComponent {
  loginForm = form(this.loginModel, (rootPath) => {
    required(rootPath.email, {
      message: 'Email is required',
    });
    required(rootPath.password, {
      message: 'Password is required',
    });
    email(rootPath.email, {
      message: 'Email is not valid',
    });
  });
}

<form>
  <input
    [field]="loginForm.email"
    type="email"
    placeholder="Enter your email"
  />
  @for (error of loginForm.email().errors(); track error.kind) {
    <p>{{ error.message }}</p>
  }
  <button [disabled]="loginForm().invalid()">Login</button>
</form>

validate(path, (ctx) => {

    return ifTrue 
        ? undefined 
        : customError();
});

validate(path, (ctx) => {

    return ifTrue 
      	? undefined 
    	: customError();
});

validate(path, (ctx) => {

    return ifTrue 
      	? undefined 
    	: customError();
});

validate(path, (ctx) => {

    return ifTrue 
      	? undefined 
    	: customError();
});

validate(rootPath, (ctx) => {
    const password = ctx.value().password;
    const confirmPassword = ctx.value().confirmPassword;

    return confirmPassword === password
      ? undefined
      : customError({
          kind: 'confirmationPassword',
        });
  });

validate(rootPath, (ctx) => {
    const password = ctx.value().password;
    const confirmPassword = ctx.value().confirmPassword;

    return confirmPassword === password
      ? undefined
      : customError({
          kind: 'confirmationPassword',
        });
  });

validate(rootPath, (ctx) => {
    const password = ctx.value().password;
    const confirmPassword = ctx.value().confirmPassword;

    return confirmPassword === password
      ? undefined
      : customError({
          kind: 'confirmationPassword',
        });
  });

@for (error of registrationForm().errors(); track error.kind) {
   @if (error.kind === "confirmationPassword") {
      Ooppps, passwords do not match!
   }
}

validate(path.confirmPassword, (ctx) => {
    const password = ctx.valueOf(path.password);

    return ctx.value() === password
      ? undefined
      : customError({
          kind: 'confirmationPassword',
        });
  });

@for (error of registrationForm.confirmPassword().errors();
      track error.kind) {
        
   @if (error.kind === "confirmationPassword") {
     Ooppps, passwords do not match!
   }
}

validateTree(path, (ctx) => {

    return ifTrue 
      	? undefined 
    	: [ customError() ];
});

validateTree(path, ({ value, fieldOf }) => {
  return value().confirmPassword === value().password
    ? undefined
    : [
        customError({
          field: fieldOf(path.confirmPassword),
          kind: 'confirmationPassword',
        }),
        customError({
          field: fieldOf(path.password),
          kind: 'confirmationPassword',
        }),
      ];
});

required(path.country);
required(path.state, {
	when: (ctx) => ctx.valueOf(path.country) === 'US',
});

@if (registrationForm.country().value() === "US") {
    <label>State</label>
    <input
      type="text"
      name="state"
      [field]="registrationForm.state"
    />
}

required(path.country);
required(path.state, {
	when: (ctx) => ctx.valueOf(path.country) === 'US',
});

@if (registrationForm.country().value() === "US") {
    <label>State</label>
    <input
      type="text"
      name="state"
      [field]="registrationForm.state"
    />
}

required(path.country);
required(path.state);
hidden(path.state, (ctx) => {
  return ctx.valueOf(path.country) !== 'US';
});

@if (!registrationForm.state().hidden()) {
    <label>State</label>
    <input
      type="text"
      name="state"
      [field]="registrationForm.state"
    />
}

// -> registration-form.schema.ts

import { schema } from '@angular/forms/signals';

export const registrationSchema = schema((path) => {
  // Validators and logic goes here
});

export const registrationSchema = schema<RegisterFormModel>((path) => {
  required(path.email);
  required(path.password);
  required(path.confirmPassword);
  validateTree(path, ({ value, fieldOf }) => {
    return value().confirmPassword === value().password
      ? undefined
      : [
          customError({
            field: fieldOf(path.confirmPassword),
            kind: 'confirmationPassword',
          }),
          customError({
            field: fieldOf(path.password),
            kind: 'confirmationPassword',
          }),
        ];
  });
  required(path.country);
  hidden(path.state, (fieldCtx) => {
    return fieldCtx.valueOf(path.country) !== 'US';
  });
});

// -> email.schema.ts

const emailSchema = schema<string>((path) => {
  required(path, { message: 'Email is required' });
  email(path, { message: 'Email is not valid' });
});

// -> email.schema.ts

const emailSchema = schema<string>((path) => {
  required(path, { message: 'Email is required' });
  email(path, { message: 'Email is not valid' });
});

// -> registration-form.schema.ts

const registrationSchema = schema<RegisterFormModel>((path) => {
  apply(path.email, emailSchema);
  required(path.password);
  required(path.confirmPassword);
  // rest of the validations
});

// -> email.schema.ts

const emailSchema = schema<string>((path) => {
  required(path, { message: 'Email is required' });
  email(path, { message: 'Email is not valid' });
});

// -> registration-form.schema.ts

const registrationSchema = schema<RegisterFormModel>((path) => {
  apply(path.email, emailSchema);
  applyEach(path.additionalEmails, emailSchema);
  required(path.password);
  required(path.confirmPassword);
  // rest of the validations
});

  formModel = signal<ContractFormModel>({
    title: '',
    projectOverview: {
      projectName: '',
      projectCode: '',
      startDate: new Date(),
      endDate: new Date(),
      projectLocation: '',
      projectDescription: '',
    },
    clientInformation: {
      clientName: '',
      clientContact: '',
      clientEmail: '',
      clientAddress: '',
      clientPhone: '',
    },
    contractorInformation: {
      contractorName: '',
      contractorLicenseNumber: '',
      contractorContact: '',
      contractorEmail: '',
      contractorAddress: '',
      contractorPhone: '',
    },
    scopeOfWork: {
      scopeDescription: '',
      deliverables: [],
      milestones: [],
    },
    termsConditions: {
      termsAccepted: false,
      confidentialityLevel: '',
      liabilityClauses: '',
      terminationClause: '',
      governingLaw: '',
      specialClauses: [],
    },
    signatory: {
      signatoryName: '',
      signatoryContractor: '',
      signatoryDate: new Date(),
      signatorySignature: '',
    },
    paymentDetails: {
      totalAmount: null,
      currency: '',
      paymentSchedule: '',
      invoiceFrequency: '',
    },
  });

<!-- contractor information START -->
  raw form fields goes here
<!-- contractor information END -->
  
<!-- client information START -->
  raw form fields goes here
<!-- client information END -->
  
<!-- scope of work START -->
  raw form fields goes here
<!-- scope of work END -->
  
<!-- project overview START -->
  raw form fields goes here
<!-- project overview END -->

<!-- terms and conditions START -->
  raw form fields goes here
<!-- terms and conditions END -->

<app-contractor-information 
	[field]="myForm.contractorInformation" />
  
<app-client-information
  	[field]="myForm.clientInformation"/>
  
<app-scope-of-work
  	[field]="myForm.scopeOfWork" />
  
<app-project-overview
  	[field]="myForm.projectOverview" />
  
<app-terms-conditions
  	[field]="myForm.termsConditions" />

@Component({
  selector: 'app-scope-of-work',
  imports: [ Field, FieldTree ],
  templateUrl: './scope-of-work.component.html',
  styleUrl: './scope-of-work.component.scss',
})
export class ScopeOfWorkComponent {
  field = input.required<FieldTree<ScopeOfWorkFormModel>>();

  addDeliverable() {
    this.field()
      .deliverables()
      .value.update((current) => [
        ...current, { name: '', description: '' }
      ]);
  }
}

.
├── parent
│   └── parent.component.ts
├── children
│   ├── child-1
│   │   ├── child-1.component.ts
│   │   └── child-1.schema.ts
│   └── child-2
│       ├── child-2.component.ts
│       └── child-2.schema.ts

.
├── parent
│   └── parent.component.ts
├── children
│   ├── child-1
│   │   ├── child-1.component.ts
│   │   └── child-1.schema.ts
│   └── child-2
│       ├── child-2.component.ts
│       └── child-2.schema.ts

.
├── parent
│   └── parent.component.ts
├── children
│   ├── child-1
│   │   ├── child-1.component.ts
│   │   └── child-1.schema.ts
│   └── child-2
│       ├── child-2.component.ts
│       └── child-2.schema.ts

.
├── parent
│   └── parent.component.ts
├── children
│   ├── child-1
│   │   ├── child-1.component.ts
│   │   └── child-1.schema.ts
│   └── child-2
│       ├── child-2.component.ts
│       └── child-2.schema.ts

@Component({ ... })
export class StarRatingComponent {
  // Input property for the rating value
  rating = model<number>(0);
  
  stars = computed(() => {
    // Computed property to generate the stars array
  });

  // Click handler for star selection
  onStarClick(starIndex: number): void {
    this.rating.set(starIndex);
  }
}

<div class="star-rating">
  @for (star of stars(); track star.index) {
    <span [class.filled]="star.filled" 
          (click)="onStarClick(star.index)">
      ★
    </span>
  }
</div>

<app-star-rating [rating]="4" />

@Component({ ... })
export class StarRatingComponent {
  // Input property for the rating value
  rating = model<number>(0);
  
  stars = computed(() => {
    // Computed property to generate the stars array
  });

  // Click handler for star selection
  onStarClick(starIndex: number): void {
    this.rating.set(starIndex);
  }
}

@Component({ ... })
export class StarRatingComponent {
  // Input property for the rating value
  value = model<number>(0);
  
  stars = computed(() => {
    // Computed property to generate the stars array
  });

  // Click handler for star selection
  onStarClick(starIndex: number): void {
    this.value.set(starIndex);
  }
}

<!--app-star-rating [rating]="4" /-->
<app-star-rating [field]="path.rating" />

@Component({ ... })
export class StarRatingComponent {
  // Input property for the rating value
  value = model<number>(0);
  
  stars = computed(() => {
    // Computed property to generate the stars array
  });

  // Click handler for star selection
  onStarClick(starIndex: number): void {
    this.value.set(starIndex);
  }
}

@Component({ ... })
export class StarRatingComponent 
            implements FormValueControl<number> {
  // Input property for the rating value
  value = model<number>(0);
  
  stars = computed(() => {
    // Computed property to generate the stars array
  });

  // Click handler for star selection
  onStarClick(starIndex: number): void {
    this.value.set(starIndex);
  }
}

counter = signal<number>(0);

counter = signal<number>(0);

counter = signal<number>(0);

counter = signal<number>(0);

counter = signal<number>(0);

<div>
  {{ counter() }}
</div>