So I have a dynamic form builder for entering information. My issue at the moment is that I would like add required to an input element based of a key or attribute I can add in the JSON that the form is built by.
Has anyone done this before, as I can't think of a good workaround to do so.
Here is the JSON and the form builder directive.
Form builder JSON
{
"book": {
"config":{
"citations": true,
"order": ["title", "author", "publisher", "issued", "publisher-place", "edition"]
},
"fields": {
"title": {
"label": "Title",
"placeholder": "Enter Title",
"type": "string"
},
"author": {
"label": "Author",
"placeholder": "Enter Author",
"type": "string"
},
"publisher": {
"label": "Publisher",
"placeholder": "Enter Publisher",
"type": "string"
},
"issued": {
"label": "Year of Publication (YYYY-MM-DD)",
"placeholder": "Enter year of publication (YYYY-MM-DD)",
"type": "string"
},
"publisher-place": {
"label": "Place of Publication",
"placeholder": "Enter Place of Publication",
"type": "string"
},
"edition": {
"label": "Edition",
"placeholder": "Enter edition",
"type": "string"
}
}
},
"chapter": {},
"article": {},
"website": {}
}
Form Builder Directive
angular.module('ReferenceME.directives.formBuilder', [
'templates',
'ngResource'
])
.directive('formBuilder', ['$resource', '$http', function ($resource, $http) {
var sortFormData = function (data) {
console.log(data);
for (var item in data) {
for (var field in data[item].fields) {
data[item].fields[field].model = field;
}
}
return data;
};
return {
templateUrl: 'formBuilder/formBuilder.html',
link: function (scope, element, attrs) {
$http.get('assets/templates/forms.json').then(function (response) {
scope.formFields = sortFormData(response.data);
scope.referenceForm.fields = {type:scope.manualEntryType};
});
}
}
}]);
Form builder template
<form ng-submit="createReference(referenceForm)" class="manual-entry__form animate__labels-left" name="referenceForm" novalidate>
<p class="manual-entry__field" ng-repeat="field in formFields[manualEntryType].fields">
<input type="text" ng-model="referenceForm.fields[field.model]" placeholder="{{field.placeholder}}" />
<label>{{field.label}}</label>
</p>
<input class="submit__button" type="submit" value="ReferenceME">
</form>