riot-form
v0.2.0
Published
Form inputs for RiotJS
Downloads
13
Readme
riot-form 
Easy forms for riotjs.
A set of classes and tags to generate and handle forms.
Installation
You can either include the files in dist or require.
With npm
npm install riot-form --saveWith bower
bower install riot-form --saveUsage
Example with automatic rendering
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>simple.html</title>
</head>
<body>
<app></app>
<script type="riot/tag">
<app>
<rf-form model="{ form }" class-name="custom-class">
<input type="submit" value="Save">
</rf-form>
<div class="output">
Username: <span class="username">{ form.model.username }</span>
Profile: <span class="profile">{ form.model.profile }</span>
</div>
this.form = new riotForm.Form.Builder('simple')
.addInput({name: 'username', type: 'text'})
.addInput({name: 'profile', type: 'textarea'})
.setModel({username: 'Daniel', profile: 'My name is Daniel'})
.build();
this.form.on('change', () => this.update())
</app>
</script>
<script src="./components/riot/riot+compiler.js"></script>
<script src="./js/riot-form.js"></script>
<script>
riot.mount('app')
</script>
</body>
</html>Example with manual rendering
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>simple.html</title>
</head>
<body>
<app></app>
<script type="riot/tag">
<app>
<form name="{ form.name }" onsubmit="{ doSomething }">
<rf-text-input model="{ form.inputs.username }" autofocus>
<rf-textarea-input model="{ form.inputs.profile }">
<input type="submit" value="Save">
</form>
<div class="output">
Username: <span class="username">{ form.model.username }</span>
Profile: <span class="profile">{ form.model.profile }</span>
</div>
this.form = new riotForm.Form.Builder('simple')
.addInput({name: 'username', type: 'text'})
.addInput({name: 'profile', type: 'textarea'})
.setModel({username: 'Daniel', profile: 'My name is Daniel'})
.build();
this.doSomething = function () {
console.log(this.form.model);
}.bind(this);
this.form.on('change', () => this.update())
</app>
</script>
<script src="./components/riot/riot+compiler.js"></script>
<script src="./js/riot-form.js"></script>
<script>
riot.mount('app')
</script>
</body>
</html>Note that in both cases, the form.model property will always be synchronized with the content of the form.
API
riotForm.Form
Form.prototype
name: Returns the name of the form, included in the configinputs: Returns all the inputs of the form as an objectmodel: Returns the model of the formerrors: Returns an object with the errors of the formvalid: Returns a boolean withtrueif the form is valid andfalseotherwise
Form.Builder
addInput: Add an input to the form. It can be any object with anameand atypeproperties You can pass atagas an option to change the tag that will be rendered for this inputsetModel: Set the form model. form values will be populated with itbuild: Construct the form and returns aForminstance.
By default, the model will be cloned when building the form, to avoid overriding existing values.
If you want the values model of the you pass to be changed, pass {noClone: true} to the build
method.
How to
Registering new inputs
You will probably want to create new inputs to fit your needs.
You can easily do so by creating a subclass of riotForm.BaseInput and registering it as follow.
With ES5
// ES5
var riotForm = require('riot-form')
var MyInput = riotForm.BaseInput.extend({
myFunc: function () {
return 'whatever you want'
}
})
MyInput.type = 'my-type'
MyInput.defaultTag = 'my-tag'
riotForm.inputFactory.register(MyInput)or with ES6
// ES6
import {BaseInput, inputFactory} from 'riot-form'
class MyInput extends BaseInput {
myFunc() {
return 'whatever you want'
}
}
MyInput.type = 'my-type'
MyInput.defaultTag = 'my-tag'
inputFactory.register(MyInput)