Aurelia Validation
In this screencast we implement validation in our simple todo application that we created here, it’s basically the same exercise as we did in the angular 2 forms screencast, make sure to check it out if you missed it. The idea is to compare aurelia with angular2, imho aurelia is winning the race right now, let me know what you think.
Steps to get validation with Aurelia
If you’re new to aurelia, make sure you check out my first screencast on aurelia here, before you follow these steps on how to implement validation.
Install the validation plugin by executing the following command via JSPM:
jspm install aurelia-validation
And change the aurelia-app attribute to aurelia-app=”main”.
<body aurelia-app="main">
The aurelia framework will now bootstrap the application by looking for your main.js file and executing the exported configure method. Add a new main.js file with the following contents:
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-validation');
aurelia.start().then(a => a.setRoot('app', document.body));
}
Once you’ve loaded the plugin, validation is set up using the fluent validation API in the view model (borrowed from http://aurelia.io/validation/#/).
import {Validation} from 'aurelia-validation';
export class Person {
static inject() { return [Validation];}
constructor(validation) {
this.firstName = 'John';
this.validation = validation.on(this)
.ensure('firstName')
.isNotEmpty()
.hasLengthBetween(3,10);
}
}
With the following template:
<template>
<form role="form" validate.bind="validation">
<div class="form-group">
<label>First Name</label>
<input type="text" value.bind="firstName" class="form-control" >
</div>
</form>
</template>
That’s it, you’re done! You don’t need to mess around with annotations and keep track of what needs to be passed as viewBindings or directives to the template as seen in angular 2 forms. Honestly, it just works!
Conclusion
For the moment Aurelia feels a lot more finished and easier to use. I was struggling with getting angular2 forms up and running and it’s poorly documented, whereas I could just follow the documentation on the aurelia validation github repo and be up and running within minutes. Let me know what you think in the comments, it’s OK to disagree! ;-)
Anyways, I hope you guys enjoyed the screencast, until next time, have an excellent day!
Source code as always at @ https://github.com/ajtowf/ng2_overview/
Leave a Reply
Want to join the discussion?Feel free to contribute!