Overview:
Video and Source code for starting point for this blog Post
YouTube Video – https://www.youtube.com/watch?v=iM_KjhY4lL0GitHub Source Code – https://github.com/aaronksaunders/ionic-formly-demo
Read more information here: http://docs.angular-formly.com/docs/custom-templates
For this sample, we want to have a datePicker integrated with the ionic-formly object to manage the input in a seamless manner. This is a quick example of how one might do something like this in a project. This code is based on the previous post, video on using Ionic-Formly Templates.
Basic Steps for Integrating the Formly Template into the Ionic Framework solution
Install the calendar plugin – $cordovaDatePicker
Install ngCordova
Update index.html
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
Then, include ngCordova as a dependency in your angular module:
Add new Formly Template to index.html, the template is the html that will render the text label for the date along with a calender icon for a button as part of the form
<script type="text/ng-template" id="inputDatePicker.html"> <ion-item class="item-icon-right"> <i ng-click="to.onclick(model,options)" class="icon ion-ios-calendar-outline"></i> {{ model[options.key] | date : to.dateFormat }} </ion-item></script>
Inject formlyConfig as a parameter being passed into the controller along with $cordovaDatePicker
Add the code for the new formly type in the controller, we will call this function to create the type to be used in the form.
Here is the updated controller showing all of the changes integrated into the code
Opmerkingen