Form Stamp. Библиотека виджетов для angular.js

Когда я начал разрабатывать на angular.js первое реальное приложение, то буквально сразу столкнулся с нехваткой привычных элементов управления. Взять тот же привычный всем виджет календаря из библиотеки jQuery-UI. Чтобы воспользоваться им в angular.js-проекте потребуется потратить время на написание обертки. В одном из своих постов я рассказывал и показывал пример создания подобной директивы. Это не сложно, пока не появляется цели сделать нечто подобное для более сложных элементов управления.

Angular-ui – библиотека готовых оберток

Решать одну и ту же проблему многократно никому не хочется. Команда AngularTeam взялась за дело и попыталась решить эту задачу в виде релиза библиотеки на основе виджетов из bootstrap. Проект назвали angular-ui. В него вошла неплохая подборка виджетов, но для проектов со сложным UI их может не хватить.

FormStamp – еще одна библиотека виджетов для angular.js

Я познакомился с библиотекой FormStamp (http://formstamp.github.io/), когда меня не устроила реализация мульти селекта в наборе angular-ui. Он не поддерживал работу с некоторыми директивами и мне ничего не осталась как начать искать альтернативу. Вот так совершенно случайно я наткнулся на пакет FormStamp.

В FormStamp я сразу нашел решение своей проблемы (в поставку входит интересный вариант multiple select), а заодно качественную реализацию других полезных элементов управления: Datetime picker, select и т.д.

Может показаться, что FormStamp это простой клон angula-ui. На первый взгляд так и есть, но при детальном рассмотрении становится очевидно, что это совершенно иной проект. Разработчики библиотеки создали все виджеты с нуля, используя возможности angular.js. В итоге получились не просто обертки (как в angular-ui), а полноценные компоненты с поддержкой тесной интеграции с другими директивами angular.js. Последнего мне частенько не хватало при использовании angular-ui.

Кроме красоты кода и нативного характера, в FormStamp реализована классная фича под названием Form Builder. С его помощью разработчик получает возможность описывать форму декларативно (любители Ruby on Rails должны быть в курсе), позволяя существенно сократить количество кода. Лучше всего прочувствовать крутость это фишки на реальном примере. Рассмотрим пример типичного описания формы:

<form class="form-horizontal" role="form" name="form" ng-app="form-demo">
    <div class="form-group" ng-class="{'has-error': form.username.$invalid}">
        <label for="username" class="col-sm-2 control-label">Username</label>
        <div class="col-sm-10">
            <input type="text"
                   class="form-control"
                   id="username"
                   placeholder="Username"
                   required="required"
                   ng-pattern="/awesome/"
                   name="username"
                   ng-model="username" />
            <p class="alert alert-danger" ng-show='form.username.$error.pattern'>
                Username should be awesome
            
        </div>
    </div>
    <div class="form-group" ng-class="{'has-error': form.email.$invalid}">
        <label for="email" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
            <input type="email"
                   class="form-control"
                   id="email"
                   placeholder="Email"
                   required="required"
                   name="email"
                   ng-model="email" />
            <p class="alert alert-danger" ng-show='form.email.$error.email'>
                Email should be valid
            
        </div>
    </div>
    <div class="form-group" ng-class="{'has-error': form.password.$invalid}">
        <label for="password" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
            <input type="password"
                   class="form-control"
                   id="password"
                   placeholder="Password"
                   required="required"
                   name="password"
                   ng-model="password"
                   ng-minlength='6' />
            <p class="alert alert-danger" ng-show='form.password.$error.minlength'>
                Password should be longer
            
        </div>
    </div>
    <div class="form-group">
        <label for="birthDate" class="col-sm-2 control-label">Birth Date</label>
        <div class="col-sm-10">
            <input type="date"
                   class="form-control"
                   id="birthDate"
                   placeholder="Birth Date"
                   ng-model="birthDate" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">Sign up</button>
        </div>
    </div>
</form>

Вроде ничего сложного, но описание простой формы выглядит как-то многословно. С помощью инструмента Form Builder выше приведенный код легко сократить до:

<fs-form-for model="samurai">
  <fieldset class="form-horizontal">
    <fs-input as="text" name="username" required="" label="Name"></fs-input>
    <fs-input as="email" name="email" required="" label="Email"></fs-input>
    <fs-input as="password" name="password" required="" label="Email"></fs-input>
    <fs-input as="fs-date" name="birthdate" required="" label="Date of Birth"></fs-input>
  </fieldset>
</fs-form-for>

Пока доступна только alpha

В настоящее время FormStamp доступна в виде альфа-версии и ее не рекомендуется использовать в продакшине. Применять в реальных проектах ее можно только на свой страх и риск. Я достаточно долго тестировал библиотеку и за это время не выявил никаких косяков. В общем, я соблазнился и заюзал ее в реальном проекте. Пока полет нормальный.