@ basenative/forms
基于信号的表单状态管理，具有验证和字段跟踪功能
部分 BaseNative 生态系统——基于信号的web运行时，基于原生HTML。
安装
npm install @basenative/forms
快速入门
import { createForm, createField, required, email, minLength } from '@basenative/forms';
const form = createForm({
fields: {
email: createField('', { validators: [required(), email()] }),
password: createField('', { validators: [required(), minLength(8)] }),
},
});
// Read field state reactively
import { effect } from '@basenative/runtime';
effect(() => {
console.log(form.fields.email.value());
console.log(form.fields.email.errors());
console.log(form.valid());
});
// Handle submission
form.fields.email.setValue('[email protected]');
form.fields.password.setValue('secret123');
if (form.valid()) {
const data = form.values();
await submitToApi(data);
}
API
createField(initial, options?)
创建响应式表单字段。返回：
value-用当前字段值发出信号。touched-信号，字段模糊后为真。dirty-信号，值改变后为true。errors-带有验证错误消息数组的计算信号。valid/invalid-计算布尔值。firstError-具有第一个错误消息的计算信号或null.setValue(value)-更新该值，并将该字段标记为dirty。touch()-标记该区域为已触碰。reset()-将值、触摸、脏和服务器错误重置为初始状态。setServerErrors(errors)-注入服务器端验证错误。
选项
validators-验证器函数数组（参见下面的内置验证器）。transform-在存储之前应用于每个新值的函数。
createForm(options)
从字段映射创建表单组。返回：
fields-字段图传入。valid-计算信号，当所有字段都有效时为true。values()-返回当前字段值的纯对象。reset()—重置所有字段。touch()-将所有字段标记为已触摸。
zodAdapter(schema)
调整一个Zod模式，使其用作表单级验证器。
内置验证器
required()—Value不能为空。minLength(n)-字符串必须至少为n字符。maxLength(n)-字符串必须最多为n字符。pattern(regex, message?)-值必须与正则表达式匹配。email()-值必须是有效的电子邮件地址。min(n)-数值必须至少为n.max(n)—数字最多只能为一个n.custom(fn)——运行fn(value)并使用其返回值作为错误消息 (返回falsy表示有效)。
许可证
apache - 2.0