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">
      <label class="col-sm-2 control-label">{{field.title}} <span ng-if="!entry[field.id]">*</span></label>
      <div class="col-sm-10">
        <input type="{{field.type}}" class="form-control" required="" ng-model="entry[field.id]" ng-class="{ error : !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">Envoyer</button>
	  </div>
     </div>
  </form>
  </div>
</div>

CSS

.error:focus{
    outline-color: red;
    border-color: red;
}

.error{
    outline-color: red;
    border-color: red;
}

JavaScript

function FormCtrl($scope) {
  $scope.table = {
		"id": "test",
		"title": "Articles",
		"$key": "id",
		"sort": {
			"by": "position",
			"way": "asc"
		},
		"fields": [
			{
				"id": "title",
				"type": "text",
				"title": "Title",
				"required": true
			},
			{
				"id": "position",
				"type": "number",
				"title": "Position",
				"required": false
			}
		]
	};
    $scope.save = function() {
       // blabla   
    }
    $scope.entry = {
        title: "title",
        position: 1
    };
}