/tie-ng

Using TieJS with Angular

Primary LanguageJavaScriptMIT LicenseMIT

Tie.js

TieJS makes it easy to create forms via JSON and bind objects to its form fields. Furthermore it has HTML5 validation functionalities

Getting Started

First create a new javascript object, which will be tied to the form.

var User = function() {
    var self = this;

    self.id = 0;
    self.username = '';
    self.firstname = '';
    self.lastname = '';
    self.email = '';
};

Adding TieJS to a form and setting user as bindingSource:

var user = new User(); 
$('#form').TieJS({bindingSource: user});

Define the fields and tie the properties of the user object to the form:

var tiejs = form.data('tiejs').addFields([{
            type: "text",
            data: {
                label: "Benutzername",
                name: "username",
                placeholder: "Benutzername",
                attributes: ["autofocus"],
                required: true
            }
        }, {
            type: "text",
            data: {
                label: "Vorname",
                name: "firstname",
                placeholder: "Vorname"
            }
        }, {
            type: "text",
            data: {
                label: "Nachname",
                name: "lastname",
                placeholder: "Nachname"
            }
        }, {
            type: "email",
            data: {
                label: "E-Mail-Adresse",
                name: "email",
                placeholder: "E-Mail-Adresse",
                required: true
            }
        }
    ]).addBindings([{
            "username": "username",
            "firstname": "firstname",
            "lastname": "lastname",
            "email": "email"
        }
    ]);

TieJS Angular Directive

Example how to use the directive:

  1. include tie.js and tiejs-angular.js into the project

  2. add the directive to your angular modul

    var app = angular.module('testApp', ['tiejs-ang']);

  3. in your controller.js create your tiejs form:

    // ---- TieJS Angular Form Example---- // (function () { var firstData = [{ // first we have some rows... type: "text", data: { label: "Name", name: "name", placeholder: "Benutzername", attributes: ["autofocus"], required: true } }, { type: "number", data: { label: "Alter", name: "age", placeholder: "Alter", required: true } }, { type: "color", data: { label: "Lieblings-Farbe", name: "wantedColor", required: true } }];

     // as columns
 var secondData = [{  //then we have two columns...
     type: "text",
     data: {
         label: "Start",
         name: "start",
         placeholder: "hh:mm",
         attributes: ["autofocus"],
         required: true,
         regex: "^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$"
     }
 }, {
     type: "text",
     data: {
         label: "Ende",
         name: "end",
         placeholder: "hh:mm",
         required: true,
         regex: "^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$"
     }
 }];

 // as row fields        //then we have again a row...
 var thirdData = [{
     type: "checkbox",
     data: {
         label: "Alles ok so ?",
         name: "checkAll"
     }
 }];

 var bindings = [{
     "name": "name",
     "age": "age",
     "wantedColor": "wantedColor",
     "start": "start",
     "end": "end",
     "checkAll": "checkAll"
 }];

 $scope.testForm = {
     "fields": [
         {"typ": "field", "data": firstData},
         {"typ": "column", "data": secondData},
         {"typ": "field", "data": thirdData}
     ],
     "bindings": bindings
 };

    })();

  4. create an tiejs tag in the html code:

Dependencies