can-form

Presentation of the can-form plugin - https://github.com/retro/can-form

Transcript

1. can-form Awesome forms for CanJS
2. Why? • validations and error reporting is a pain • similar code written over and over again • how do you handle nested object structures?
3. can-form • can-value is great, use it • behaves like the can.Component • composable / nestable (allows it to handle nested structures) • validations on the form (validations are bound to context) • simple error reporting and tracking
4. API FormComponent.extend({ tag : 'simple-form', template : '<content><content>', validate : { username : [FormComponent.validationRules.presenceOf()], password : [FormComponent.validationRules.presenceOf()] } }); <simple-form map="{userModel}"> <input type="text" can-value="username"> {{#errors 'username'}} <ul class="bg-danger list-unstyled"> {{#this}} <li>{{ . }}</li> {{/this}} </ul> {{/errors}} <input type="text" can-value="password"> {{#errors 'password'}} <ul class="bg-danger list-unstyled"> {{#this}} <li>{{ . }}</li> {{/this}} </ul> {{/errors}} <button>Submit</button> </simple-form>
5. API FormComponent.extend({ tag : 'simple-form', template : '<content><content>', validate : { username : [FormComponent.validationRules.presenceOf()], password : [FormComponent.validationRules.presenceOf()], 'socialNetworks.*.username' : [FormComponent.validationRules.presenceOf()], 'socialNetworks.*.network' : [FormComponent.validationRules.presenceOf()] } });
6. API <simple-form map="{userModel}"> <input type="text" can-value="username"> {{#errors 'username'}} <ul class="bg-danger list-unstyled"> {{#this}} <li>{{ . }}</li> {{/this}} </ul> {{/errors}} … ! {{#each socialNetworks}} <form-for map="{this}" path="socialNetworks.{{@index}}"> <input type="text" can-value="network"> // error reporting code here <input type="text" can-value="username"> // error reporting code here </form-for> {{/each}} <button>Submit</button> </simple-form>
7. API FormComponent.extend({ tag : 'social-network', template : socialNetworkTemplate, validate : { username : [FormComponent.validationRules.presenceOf()], network : [FormComponent.validationRules.presenceOf()] } })
8. API <simple-form map="{userModel}"> <input type="text" can-value="username"> {{#errors 'username'}} <ul class="bg-danger list-unstyled"> {{#this}} <li>{{ . }}</li> {{/this}} </ul> {{/errors}} ! … ! {{#each socialNetworks}} <social-network map="{this}" path="socialNetworks.{{@index}}"> </social-network> {{/each}} ! <button>Submit</button> </simple-form>
9. github.com/retro/can-form @mihaelkonjevic