さらに、フロントエンドにアナログレールフォームビルダーが必要でした。 フォームビルダーにより、プログラマはフォームを宣言的に記述し、マークアップとエラー出力の生成を行うことができます。
これらの問題の解決策は、私たちが開発したFormStampライブラリであり、以下を提供します。
- フォームビルダ-Ruby on Railsエコシステムのフォームジェネレータとの類推によって作成された、フォームを操作するための最高レベル。
- フォームを操作するときに遭遇するタスクの80%をカバーし、標準のHTML5要素によって解決されないウィジェットのセット。
- 新しいウィジェットを構築するための低レベルのコンポーネント。
開発中、次の原則がライブラリに組み込まれました。
- すべてのウィジェットは、AngularJSディレクティブを使用してゼロから作成されます。これにより、コードを削減して読みやすくすることができます。
- AngularJSとの完全な統合(ngModelのサポート、ngRequired ...);
- Bootstrapを使用したデフォルトのスタイル。
インストール手順
FormStampは、Bowerパッケージシステムを使用してプロジェクトに接続できます。
bower install angular-formstamp
フォームビルダー
AngularJSの表現力豊かな宣言的アプローチは、UIを作成するために記述する必要があるコードの量を削減します。 ただし、この方法を使用しても、フィールド補完チェックを使用して単純なフォームを作成し、エラーメッセージを表示する場合、多くの繰り返しコードを記述する必要があります。
コード
<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 </p> </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 </p> </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 </p> </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>
説明:
-
fsFormFor
フォームを作成するディレクティブ。model
属性は、フォームが作成されるモデルを示します。 -
fsInput
は、次の属性を持つフォーム内の各要素を記述するディレクティブです。- as-フォーム要素のタイプ。
-
name
モデル属性の名前。 -
label
テキスト。
他のすべての属性は、
as
属性で指定されたフォーム要素に委任さ
as
ます。
ウィジェットセット
アプリケーションが複雑であればあるほど、標準のフォーム要素を見逃すことは少なくなり、追加のウィジェットがすぐに必要になります。 現時点では、AngularJSとの統合用に設計されたウィジェットは多くありません。ウィジェットの一部は、jQueryウィジェットのラッパーです。 FormStampライブラリには、AngularJS APIを使用してゼロから記述されたウィジェットが含まれており、これにより作業中に最も頻繁に直面するタスクを解決できます。
- 入力した値でフィルタリングする機能を選択します。
- フリーテキスト(コンボボックス)のサポートを選択します。
- 入力した値でフィルタリングする機能を備えた複数選択。
- フリーテキスト(タグ入力)をサポートする複数選択。
- ラジオグループ;
- チェックボックスグループ。
- 日付および/または時間とカレンダーを操作するためのウィジェット。
選択ウィジェットの操作を検討してください
fsSelect
ディレクティブを使用して
fsSelect
ます。 このディレクティブは、属性
freetext
、
items
、
ng-model
、
ng-required
、
ng-disabled
サポートしています。
属性(デフォルトではfalse)は、ウィジェットの動作を定義します。freetext
freetext=false
ウィジェットはselectのように動作します。つまり、オプションのリストから1つの要素を選択できます。
freetext=true
ウィジェットはコンボボックスのように動作します。つまり、オプションのリストから値を選択するか、他の値を入力できます。
属性は、スコープのどのプロパティにウィジェットに表示されるオプションのリストが含まれているかを示します。items
freetext=false
オプションはオブジェクトまたはプリミティブタイプのいずれかです。
freetext=true
オプションは文字列のみになります。
属性は標準のngModelディレクティブです。ng-model
この属性は、ウィジェットが無効か有効かを決定するスコーププロパティを示します。ng-disabled
オプションが
$scope.arrayOfOptions
に含まれるコンボボックスを作成するには、選択されたオプションは
$scope.selectedOption
に関連付けられ、無効/有効状態は
$scope.flag
に依存し、次のようにディレクティブを記述します。
<div fs-select items=”arrayOfOptions” ng-disabled=”flag” ng-model=”selectedOption” freetext=”true”></div>
他のウィジェットとForm Builderの使用例は、ライブラリページで入手できます 。
指令
追加のウィジェットの作成を容易にするために、機能の一部を低レベルのディレクティブに割り当て始めました。
-
fsList
アイテムのリストを表示します。リスト内のアイテムを選択し、キーボードから選択を移動できます。 -
fsNullForm
-fsNullForm
関連付けられたフォーム要素を親フォームから非表示にします。 -
fsInput
キーボードイベントの処理とフォーカスの変更を簡素化します。 -
fsCalendar
カレンダーを表示し、日付を選択済みとしてマークできます。
たとえば、
fsList
と
fsInput
を使用して、プレーヤーのプレイリストを作成します。
fsList
操作は、
$scope
listInterface
プロパティとの相互作用によって行われ
$scope
。
listInterface
には次のプロパティがあります。
-
selectedItem
現在選択されている値。 読み取り専用。 -
onSelect(value)
-値選択イベントのイベントハンドラー。 ユーザーが実装する必要があります。 -
move(d)
は、指定された数の要素にポインターを移動する関数です。
html5から
audio
タグをラップするディレクティブを作成します。
app.directive("demoAudio", function() { return { restrict: "E", scope: { track: '=' }, template: "<audio controls />", replace: true, link: function($scope, $element, $attrs) { return $scope.$watch('track', function(track) { $element.attr('src', track.stream_url + "?client_id=8399f2e0577e0acb4eee4d65d6c6cce6"); return $element.get(0).play(); }); } }; });
SoundCloud SDKを接続する
<script src="http://connect.soundcloud.com/sdk.js"></script>
次に、これらの要素をバインドするコントローラーを作成します。
function ListDemoCtrl($scope) { // SoundCloud SDK SC.initialize({ client_id: '8399f2e0577e0acb4eee4d65d6c6cce6' }); // SoundCloud $scope.$watch('search', function () { SC.get('/tracks', { q: $scope.search, license: 'cc-by-sa' }, function(tracks) { $scope.$apply(function() { $scope.tracks = tracks }) }) }); $scope.search = 'bach'; $scope.tracks = []; // fsList $scope.move = function (d) { $scope.listInterface.move(d); }; // fsList $scope.listInterface = { onSelect: function (selectedItem) { $scope.select(selectedItem) } }; $scope.select = function(selectedItem) { $scope.selectedTrack = selectedItem || $scope.listInterface.selectedItem; }; }
そして、アプリケーション自体:
<div ng-controller="ListDemoCtrl" style="postion: relative;"> <div class="row"> <div class="col-xs-7"> <!-- fsInput --> <input class="form-control" autofocus="1" fs-input fs-up="move(-1)" fs-down="move(1)" fs-enter="select()" ng-model="search"> <!-- fsList --> <div fs-list="" items="tracks" class="no-popup"> <!-- --> <img src="{{ item.artwork_url }}" width="30" height="30"> {{item.title}} <small class="text-muted">{{item.genre}}</small> </div> </div> <div class="col-xs-5"> <!-- fsList - --> <demo-audio track="selectedTrack"></demo-audio> <pre style="margin-top: 20px;">Selected Item: {{ selectedTrack | json }}</pre> </div> </div> </div>
その結果、次のようなプレーヤーが得られます。

ここでライブの例を見ることができます 。
次の記事では、FormStampを使用してフォームを作成する方法を詳しく見ていきます。
デモライブラリ
ライブラリコード