快速开始
开始使用 TanStack Form 的最基本方法是创建一个 TanstackFormController，如下面的示例所示，使用 Employee 接口作为我们的测试表单。
ts
interface Employee {
firstName: string
lastName: string
employed: boolean
jobTitle: string
}
#form = new TanStackFormController()<Employee>(this, {
defaultValues: {
firstName: '',
lastName: '',
employed: false,
jobTitle: '',
},
})
interface Employee {
firstName: string
lastName: string
employed: boolean
jobTitle: string
}
#form = new TanStackFormController()<Employee>(this, {
defaultValues: {
firstName: '',
lastName: '',
employed: false,
jobTitle: '',
},
})
在此示例中，this 指的是您要在其中使用 TanStack Form 的 LitElement 实例。
要将模板中的表单元素与 TanStack Form 连接起来，请使用 TanstackFormController 的 field 方法。
field 的第一个参数是 FieldOptions，第二个参数是渲染您的元素的 callback。
ts
field(FieldOptions, callback)
field(FieldOptions, callback)
我们完成的测试表单应该看起来像下面这样。该表单从用户输入字段收集名字。
ts
export class TestForm extends LitElement {
#form = new TanStackFormController<Employee>(this, {
defaultValues: {
firstName: '',
lastName: '',
employed: false,
jobTitle: '',
},
})
render() {
return html` <p>Please enter your first name></p>
${this.#form.field(
{
name: `firstName`,
validators: {
onChange: ({ value }) =>
value.length < 3 ? 'Not long enough' : undefined,
},
},
(field: FieldApi<Employee, 'firstName'>) => {
return html` <div>
<label class="first-name-label">First Name</label>
<input
id="firstName"
type="text"
placeholder="First Name"
@blur="${() => field.handleBlur()}"
.value="${field.getValue()}"
@input="${(event: InputEvent) => {
if (event.currentTarget) {
const newValue = (event.currentTarget as HTMLInputElement)
.value
field.handleChange(newValue)
}
}}"
/>
</div>`
},
)}`
}
}
export class TestForm extends LitElement {
#form = new TanStackFormController<Employee>(this, {
defaultValues: {
firstName: '',
lastName: '',
employed: false,
jobTitle: '',
},
})
render() {
return html` <p>Please enter your first name></p>
${this.#form.field(
{
name: `firstName`,
validators: {
onChange: ({ value }) =>
value.length < 3 ? 'Not long enough' : undefined,
},
},
(field: FieldApi<Employee, 'firstName'>) => {
return html` <div>
<label class="first-name-label">First Name</label>
<input
id="firstName"
type="text"
placeholder="First Name"
@blur="${() => field.handleBlur()}"
.value="${field.getValue()}"
@input="${(event: InputEvent) => {
if (event.currentTarget) {
const newValue = (event.currentTarget as HTMLInputElement)
.value
field.handleChange(newValue)
}
}}"
/>
</div>`
},
)}`
}
}
请注意，您需要自己处理元素的更新和表单的更新，如上面的示例所示。
我们的合作伙伴
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。