カスタムコントロール

import { Component, model } from '@angular/core';import { FormValueControl } from '@angular/forms/signals';@Component({  selector: 'app-basic-input',  template: `    <div class="basic-input">      <input        type="text"        [value]="value()"        (input)="value.set(($event.target as HTMLInputElement).value)"        placeholder="Enter text..."      />    </div>  `,})export class BasicInput implements FormValueControl<string> {  /** The current input value */  value = model('');}

import { Component, model, ChangeDetectionStrategy } from '@angular/core';import { FormCheckboxControl } from '@angular/forms/signals';@Component({  selector: 'app-basic-toggle',  template: `    <button      type="button"      [class.active]="checked()"      (click)="toggle()"    >      <span class="toggle-slider"></span>    </button>  `,  changeDetection: ChangeDetectionStrategy.OnPush,})export class BasicToggle implements FormCheckboxControl {  /** Whether the toggle is checked */  checked = model<boolean>(false);  toggle() {    this.checked.update(val => !val);  }}

import { Component, signal, ChangeDetectionStrategy } from '@angular/core';import { form, Field, required } from '@angular/forms/signals';import { BasicInput } from './basic-input';import { BasicToggle } from './basic-toggle';@Component({  imports: [Field, BasicInput, BasicToggle],  template: `    <form>      <label>        Email        <app-basic-input [field]="registrationForm.email" />      </label>      <label>        Accept terms        <app-basic-toggle [field]="registrationForm.acceptTerms" />      </label>      <button        type="submit"        [disabled]="registrationForm().invalid()"      >        Register      </button>    </form>  `,  changeDetection: ChangeDetectionStrategy.OnPush,})export class Registration {  registrationModel = signal({    email: '',    acceptTerms: false  });  registrationForm = form(this.registrationModel, (schemaPath) => {    required(schemaPath.email, { message: 'Email is required' });    required(schemaPath.acceptTerms, { message: 'You must accept the terms' });  });}

import { Component, signal, ChangeDetectionStrategy } from '@angular/core';import { form, Field, required } from '@angular/forms/signals';import { CustomInput } from './custom-input';import { CustomToggle } from './custom-toggle';@Component({  selector: 'app-my-form',  imports: [Field, CustomInput, CustomToggle],  template: `    <form>      <app-custom-input [field]="userForm.username" />      <app-custom-toggle [field]="userForm.subscribe" />    </form>  `,  changeDetection: ChangeDetectionStrategy.OnPush,})export class MyForm {  formModel = signal({    username: '',    subscribe: false  });  userForm = form(this.formModel, (schemaPath) => {    required(schemaPath.username, { message: 'Username is required' });  });}

import { Component, model, input, ChangeDetectionStrategy } from '@angular/core';import { FormValueControl } from '@angular/forms/signals';import type { ValidationError, DisabledReason } from '@angular/forms/signals';@Component({  selector: 'app-stateful-input',  template: `    @if (!hidden()) {      <div class="input-container">        <input          type="text"          [value]="value()"          (input)="value.set(($event.target as HTMLInputElement).value)"          [disabled]="disabled()"          [readonly]="readonly()"          [class.invalid]="invalid()"          [attr.aria-invalid]="invalid()"          (blur)="touched.set(true)"        />        @if (invalid()) {          <div class="error-messages" role="alert">            @for (error of errors(); track error) {              <span class="error">{{ error.message }}</span>            }          </div>        }        @if (disabled() && disabledReasons().length > 0) {          <div class="disabled-reasons">            @for (reason of disabledReasons(); track reason) {              <span>{{ reason.message }}</span>            }          </div>        }      </div>    }  `,  changeDetection: ChangeDetectionStrategy.OnPush,})export class StatefulInput implements FormValueControl<string> {  // Required  value = model<string>('');  // Writable interaction state - control updates these  touched = model<boolean>(false);  // Read-only state - form system manages these  disabled = input<boolean>(false);  disabledReasons = input<readonly DisabledReason[]>([]);  readonly = input<boolean>(false);  hidden = input<boolean>(false);  invalid = input<boolean>(false);  errors = input<readonly ValidationError.WithField[]>([]);}

import { Component, signal, ChangeDetectionStrategy } from '@angular/core';import { form, Field, required, email } from '@angular/forms/signals';import { StatefulInput } from './stateful-input';@Component({  imports: [Field, StatefulInput],  template: `    <form>      <label>        Email        <app-stateful-input [field]="loginForm.email" />      </label>    </form>  `,  changeDetection: ChangeDetectionStrategy.OnPush,})export class Login {  loginModel = signal({ email: '' });  loginForm = form(this.loginModel, (schemaPath) => {    required(schemaPath.email, { message: 'Email is required' });    email(schemaPath.email, { message: 'Enter a valid email address' });  });}

import { Component, model, computed, ChangeDetectionStrategy } from '@angular/core';import { FormValueControl } from '@angular/forms/signals';@Component({  selector: 'app-currency-input',  template: `    <input      type="text"      [value]="displayValue()"      (input)="handleInput(($event.target as HTMLInputElement).value)"    />  `,  changeDetection: ChangeDetectionStrategy.OnPush,})export class CurrencyInput implements FormValueControl<number> {  value = model<number>(0);  // 数値 (1234.56) を格納します  displayValue = computed(() => {    return this.value().toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ','); // 「1,234.56」と表示します  });  handleInput(input: string) {    const num = parseFloat(input.replace(/[^0-9.]/g, ''));    if (!isNaN(num)) this.value.set(num);  }}

export class NumberInput implements FormValueControl<number> {  value = model<number>(0);  // スキーマのバリデーションルールからの制約値  required = input<boolean>(false);  min = input<number | undefined>(undefined);  max = input<number | undefined>(undefined);}

// 悪い例：コントロール内でのバリデーションexport class BadControl implements FormValueControl<string> {  value = model<string>('')  isValid() { return this.value().length >= 8 } // これは行わないでください！}// 良い例：スキーマでバリデーションし、コントロールは結果を表示accountForm = form(this.accountModel, schemaPath => {  minLength(schemaPath.password, 8, { message: 'Password must be at least 8 characters' })})