@dkx/lit-forms
Lit forms inspired by angular reactive forms.
- Validation
- Dynamic fields (arrays)
- Automatic component updates
- Material components
Installation
$ npm install --save @dkx/lit-formsDependencies:
- lit >=2.0.0-rc.1
- rxjs >=6.0.0
Example
Define form:
this.form = defaultFormBuilder.create(this, root => [
root.control('email', ''),
root.control('password', ''),
]);Render form:
<form @submit="${this.handleFormSubmit}">
<div>
<label for="email">Email</label>
<input ${this.form.attach('email')} type="email" required>
</div>
<div>
<label for="password">Password</label>
<input ${this.form.attach('password')} type="password" required>
</div>
<input type="submit">Sign in</input>
</form>Handle submit:
if (!this.form.validate()) {
return;
}
console.log(this.form.value);You can find more examples here.