カスタムコントロール

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.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, FormField, required} from '@angular/forms/signals';import {BasicInput} from './basic-input';import {BasicToggle} from './basic-toggle';@Component({  imports: [FormField, BasicInput, BasicToggle],  template: `    <form novalidate>      <label>        Email        <app-basic-input [formField]="registrationForm.email" />      </label>      <label>        Accept terms        <app-basic-toggle [formField]="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, FormField, required} from '@angular/forms/signals';import {CustomInput} from './custom-input';import {CustomToggle} from './custom-toggle';@Component({  selector: 'app-my-form',  imports: [FormField, CustomInput, CustomToggle],  template: `    <form novalidate>      <app-custom-input [formField]="userForm.username" />      <app-custom-toggle [formField]="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, WithOptionalFieldTree, 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.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 WithOptionalFieldTree<ValidationError>[]>([]);}

import {Component, signal, ChangeDetectionStrategy} from '@angular/core';import {form, FormField, required, email} from '@angular/forms/signals';import {StatefulInput} from './stateful-input';@Component({  imports: [FormField, StatefulInput],  template: `    <form novalidate>      <label>        Email        <app-stateful-input [formField]="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 {formatCurrency} from '@angular/common';import {ChangeDetectionStrategy, Component, linkedSignal, model} from '@angular/core';import {FormValueControl} from '@angular/forms/signals';@Component({  selector: 'app-currency-input',  template: `    <input      type="text"      [value]="displayValue()"      (input)="displayValue.set($event.target.value)"      (blur)="updateModel()"    />  `,  changeDetection: ChangeDetectionStrategy.OnPush,})export class CurrencyInput implements FormValueControl<number> {  // 数値 (1234.56) を格納します  readonly value = model.required<number>();  // 表示値 (「1,234.56」) を格納します  readonly displayValue = linkedSignal(() => formatCurrency(this.value(), 'en', 'USD'));  // 表示値からモデルを更新します  updateModel() {    this.value.set(parseCurrency(this.displayValue()));  }}// 通貨文字列を数値に変換します (例: 「USD1,234.56」 -> 1234.56)function parseCurrency(value: string): number {  return parseFloat(value.replace(/^[^\d-]+/, '').replace(/,/g, ''));}

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