2.8.1 • Published 6 months ago
@xlit/form v2.8.1
@xlit/form
Lit reactive component for form binding and validation
Installation
npm i @xlit/form
Getting started
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { Form, FormError } from '@xlit/form';
import { StringType } from '@xlit/schema';
@customElement('page-foo')
class PageFoo extends LitElement {
private form = new Form(this, {
foo: new StringType().required(),
bar: new StringType().required(),
}, (model) => {
// do something with model here
// to set field error throw FormError
if (err) {
throw new FormError('server err', {
foo: 'something happened with foo',
bar: 'something happened with bar',
});
}
});
render (): unknown {
return html`
<form @submit="${this.form.bindSubmit()}">
<div>
<label>Foo</label>
<input type="text" ${this.form.bindField('foo')}>
<span class="form-text">${this.form.error('foo')}</span>
</div>
<div>
<label>Bar</label>
<input type="text" ${this.form.bindField('bar')}>
<span class="form-text">${this.form.error('bar')}</span>
</div>
<div>
<input type="submit" value="Submit" .disabled="${!this.form.ok}">
</div>
</form>
`;
}
}
2.5.0
10 months ago
2.7.0
7 months ago
2.6.1
9 months ago
2.6.0
9 months ago
2.5.1
10 months ago
2.8.1
6 months ago
2.7.2
7 months ago
2.6.3
9 months ago
2.8.0
6 months ago
2.7.1
7 months ago
2.6.2
9 months ago
2.6.11
8 months ago
2.6.12
7 months ago
2.6.13
7 months ago
2.6.14
7 months ago
2.6.10
8 months ago
2.7.4
7 months ago
2.6.5
8 months ago
2.7.3
7 months ago
2.6.4
9 months ago
2.6.7
8 months ago
2.7.5
7 months ago
2.6.6
8 months ago
2.6.9
8 months ago
2.6.8
8 months ago
1.0.0
12 months ago
2.3.0
12 months ago
2.2.1
12 months ago
2.0.3
12 months ago
2.2.0
12 months ago
2.0.2
12 months ago
2.4.0
12 months ago
2.3.1
12 months ago
2.2.2
12 months ago
2.0.4
12 months ago
2.1.0
12 months ago
2.0.1
12 months ago
2.0.0
12 months ago
0.2.1
1 year ago
0.2.0
1 year ago
0.2.2
1 year ago
0.1.10
2 years ago
0.1.9
2 years ago
0.1.8
2 years ago