An AngularJS form field directive that uses Django Rest Framework's metadata in order to generate the field with the proper validation, input type, choices, etc.
Usage example:
controller.js
'use strict';
angular.module('mainApp')
.controller('ParentCtrl', [
'$scope',
'ResourceForm',
function ($scope, ResourceForm) {
// get the meta data from server
var promise = ResourceForm.options('RESOURCE_URL');
// populate
$scope.metadata = {};
promise.then(function(response) {
$scope.metadata = response.data.actions.POST;
});
// this object will be used to read from/write to
$scope.formModel = {
title: 'Mega mouse',
duration: 0,
active: false
};
}
]);
service.js - responsible for getting the meta data, returns a promise 'use strict';
angular.module('mainApp')
.service('ResourceForm', [
'$http',
function ResourceForm($http) {
this.options = function(url) {
var promise = $http({method: 'OPTIONS', url: url});
return promise;
};
}
]);
In view you can use , three parameters are required
- metadata -- that's the data object received from the server describing how each field look like
- key -- tells the directive what field it should render (title, username, duration etc.)
- ng-model="formModel" -- tells the directive what object should be used for storing the input values (hardcoded to formModel)
If you creating a Label element, ng-model should be skipped.
View
<form name="movieForm" method="POST" novalidate>
<div class="form-group" ng-class="{ 'has-error': !movieForm.title.$valid }">
<!-- A label -->
<form-field label metadata="metadata" key="title" class="col-sm-2 control-label"></form-field>
<div class="col-sm-10">
<!-- An input -->
<form-field metadata="metadata" key="title" class="form-control" id="title" ng-model="formModel" name="title"></form-field>
<!-- Form validation -->
<p ng-show="movieForm.title.$error.maxlength" class="help-block">Title is too long</p>
<p ng-show="movieForm.title.$error.required" class="help-block">Title is required</p>
</div>
</div>
</form>