0

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>
Michael Tempest
  • 814
  • 7
  • 12

1 Answers1

1

Wouldn't it be an option to use the ng-required attribute in this case? As referenced here.

<input class="submit__button" type="submit" value="ReferenceME" ng-required="{{field.required}}">
Community
  • 1
  • 1
ppa
  • 326
  • 1
  • 4