form

function form<TModel>(model: WritableSignal<TModel>): FieldTree<TModel>;

Создает форму, обернутую вокруг заданных данных модели. Форма представляет собой простое FieldTree данных модели.

form использует заданную модель как источник истины и не поддерживает собственную копию данных. Это означает, что обновление значения в FieldState также обновляет исходную переданную модель.

@parammodelWritableSignal<TModel>

Записываемый сигнал, содержащий данные модели для формы. Полученная структура полей будет соответствовать форме модели, а все изменения данных формы будут записываться в модель.

@returnsFieldTree<TModel>

Примечания по использованию

const nameModel = signal({first: '', last: ''});
const nameForm = form(nameModel);
nameForm.first().value.set('John');
nameForm().value(); // {first: 'John', last: ''}
nameModel(); // {first: 'John', last: ''}

function form<TModel>(model: WritableSignal<TModel>, schemaOrOptions: SchemaOrSchemaFn<TModel> | FormOptions<TModel>): FieldTree<TModel>;

Создает форму, обернутую вокруг заданных данных модели. Форма представляет собой простое FieldTree данных модели.

form использует заданную модель как источник истины и не поддерживает собственную копию данных. Это означает, что обновление значения в FieldState также обновляет исходную переданную модель.

@parammodelWritableSignal<TModel>

Записываемый сигнал, содержащий данные модели для формы. Полученная структура полей будет соответствовать форме модели, а все изменения данных формы будут записываться в модель.

@paramschemaOrOptionsSchemaOrSchemaFn<TModel> | FormOptions<TModel>

Второй аргумент может быть одним из следующих:

Схема или функция, используемая для задания логики формы (например, проверки, отключенных полей и т. д.). При передаче схемы параметры формы при необходимости можно передать третьим аргументом.
Параметры формы

@returnsFieldTree<TModel>

Примечания по использованию

const nameModel = signal({first: '', last: ''});
const nameForm = form(nameModel);
nameForm.first().value.set('John');
nameForm().value(); // {first: 'John', last: ''}
nameModel(); // {first: 'John', last: ''}

Форму также можно создать с помощью схемы — набора правил, определяющих логику формы. Схема может быть либо предварительно заданной схемой, созданной с помощью функции schema, либо функцией, которая строит схему, связывая логику с частями структуры полей.

const nameForm = form(signal({first: '', last: ''}), (name) => {
  required(name.first);
  pattern(name.last, /^[a-z]+$/i, {message: 'Alphabet characters only'});
});
nameForm().valid(); // false
nameForm().value.set({first: 'John', last: 'Doe'});
nameForm().valid(); // true

function form<TModel>(model: WritableSignal<TModel>, schema: SchemaOrSchemaFn<TModel>, options: FormOptions<TModel>): FieldTree<TModel>;

Создает форму, обернутую вокруг заданных данных модели. Форма представляет собой простое FieldTree данных модели.

form использует заданную модель как источник истины и не поддерживает собственную копию данных. Это означает, что обновление значения в FieldState также обновляет исходную переданную модель.

@parammodelWritableSignal<TModel>

Записываемый сигнал, содержащий данные модели для формы. Полученная структура полей будет соответствовать форме модели, а все изменения данных формы будут записываться в модель.

@paramschemaSchemaOrSchemaFn<TModel>

Схема или функция, используемая для задания логики формы (например, проверки, отключенных полей и т. д.).

@paramoptionsFormOptions<TModel>

Параметры формы

@returnsFieldTree<TModel>

Примечания по использованию

const nameModel = signal({first: '', last: ''});
const nameForm = form(nameModel);
nameForm.first().value.set('John');
nameForm().value(); // {first: 'John', last: ''}
nameModel(); // {first: 'John', last: ''}

Форму также можно создать с помощью схемы — набора правил, определяющих логику формы. Схема может быть либо предварительно заданной схемой, созданной с помощью функции schema, либо функцией, которая строит схему, связывая логику с частями структуры полей.

const nameForm = form(signal({first: '', last: ''}), (name) => {
  required(name.first);
  validate(name.last, ({value}) => !/^[a-z]+$/i.test(value()) ? {kind: 'alphabet-only'} : undefined);
});
nameForm().valid(); // false
nameForm().value.set({first: 'John', last: 'Doe'});
nameForm().valid(); // true

API

Описание

Примечания по использованию