JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<div ng-app>
<div ng-controller="FormCtrl">
<form class="form-horizontal" role="form" name="entryForm" novalidate ng-submit="save()">
<div class="form-group" ng-repeat="field in table.fields" ng-class="{ 'has-error' : entryForm[field.id].$invalid && !entryForm[field.id].$pristine }">
<label for="input_{{field.id}}" class="col-sm-2 control-label">{{field.title}} <span ng-if="field.required">*</span></label>
<div class="col-sm-10">
<input type="{{field.type}}" class="form-control" id="input_{{field.id}}" name="{{field.id}}" required ng-model="entry[field.id]">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" ng-disabled="entryForm.$invalid || entryForm.$pristine">Envoyer</button>
</div>
</div>
</form>
</div>
</div>
JavaScript
function FormCtrl($scope) {
$scope.table = {
"id": "test",
"title": "Articles",
"$key": "id",
"sort": {
"by": "position",
"way": "asc"
},
"fields": [
{
"id": "title",
"type": "text",
"title": "Titre",
"required": true
},
{
"id": "position",
"type": "number",
"title": "Position",
"required": false
}
]
};
$scope.save = function() {
// blabla
}
$scope.entry = {
title: "title",
position: 1
};
}