How to Make Forms Suck Less with Formly – Forms suck? – Change This:
How to Make Forms Suck Less with Formly – Forms suck? – Change This:
0 2
formly-forms
Polymorphic Forms with FormlyOn Github agileurbanite / formly-forms
How to Make Forms Suck Less with Formly
By Patrick Woo Agile Urbanite
About Me
I am a software engineer at Capital One, that loves to find solutions to interesting problems.
Forms suck?
<input ng-model="vm.user.fluxdate">
<div>
<label>Flux Date</label>
<input ng-model="vm.user.fluxdate">
</div>
<div>
<label for="flux">Flux Date</label>
<input ng-model="vm.user.fluxdate" id="flux">
</div>
<div class="form-group">
<label for="flux">Flux Date</label>
<input ng-model="vm.user.fluxdate" id="flux" class="form-control">
</div>
<div class="form-group">
<label for="flux">Flux Date</label>
<input ng-model="vm.user.fluxdate" id="flux" class="form-control" ng-disabled="vm.disabled" ng-required="true" ng-minlength="3" ng-maxlength="20" ng-pattern="/^a-zA-Z*$/">
</div>
Uh... McFly!!! Anybody Home?
So, what is formly?
Formly is an angular module which makes working with forms more enjoyable. It lets you configure your forms from your controller using JSON.
Why formly?
- JSON Powered Forms
- DRY Templates
- Easy to use and maintain
Change This:
<div class="edit">
<form name="editForm" data-ng-submit="edit.submit()">
<div class="form-group" ng-class="{'has-error': editForm.username.$touched && editForm.username.$invalid }">
<label for="username">Username</label>
<input name="username" class="form-control" id="username" type="text" data-ng-model="edit.model.username" placeholder="Username" ng-required="true" ng-minlength="2" ng-pattern="/^a-zA-Z*$/">
</div>
<div class="form-group" ng-class="{'has-error': editForm.rank.$touched && editForm.rank.$invalid }">
<label for="rank">Rank</label>
<input name="rank" id="rank" type="text" data-ng-model="edit.model.rank" placeholder="Rank" ng-required="true" ng-pattern="/^a-zA-Z*$/">
</div>
<div>
<label data-ng-repeat="btype in edit.model.type">
<input id="{{btype}}" type="checkbox" checklist-model="edit.user.roles" checklist-value="btype"> {{btype}}
</label>
</div>
<div class="form-group" ng-class="{'has-error': editForm.tribe.$touched && editForm.tribe.$invalid }">
<label for="tribe">Tribe</label>
<input name="tribe" id="tribe" type="text" data-ng-model="edit.model.tribe" placeholder="Tribe" ng-minlength="2" ng-required="true">
</div>
<div class="form-group" ng-class="{'has-error': editForm.catchphrase.$touched && editForm.catchphrase.$invalid }">
<label for="catchphrase">Catchphrase</label>
<input name="catchphrase" id="catchphrase" type="text" data-ng-model="edit.model.catchphrase" placeholder="Catchphrase" ng-required="true">
</div>
<div class="checkbox">
<label data-ng-repeat="power in edit.model.powers">
<input id="{{power}}" type="checkbox" checklist-model="edit.user.powers" checklist-value="power"> {{power}}
</label>
</div>
<button data-ng-click="edit.cancel(edit.model.id)">Cancel</button>
<button type="submit">Submit</button>
</form>
</div>
To This:
<div class="edit">
<form name="formlyForm" data-ng-submit="formly.submit()">
<formly-form model="formly.model" fields="formly.fields" form="formlyForm">
<button data-ng-click="formly.cancel(formly.model.id)">Cancel</button>
<button type="submit">Submit</button>
</formly-form>
</form>
</div>
with some js...