Easy forms for riotjs.
A set of classes and tags to generate and handle forms.
You can either include the files in dist or require.
npm install riot-form --save
bower install riot-form --save
<!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><!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.
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
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.
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)